CSS text-overflow: ellipsis; does not work properly or pushes d-flex content to max width

In my html structure I use Bootstrap flex and I faced a problem with text-overflow: ellipsis; and the classic way of making it.

What is text-overflow: ellipsis;? text-overflow: ellipsis; makes sure that if the sentence is longer than its block, it puts ... and makes sure that the sentence only takes up one line, rather than several. To make text overflow its container, you need to set other CSS properties: overflow and white-space.

The problem arose because my left column uses a variable width in flex, which fills up in proportion to the width of the opposite column. But my css class for text-overflow with white-space: nowrap; made the left column 100% in width and pushed col-md-3 behind it. The culprit was white-space: nowrap;, I can't quite explain how it inside another container can be allowed to push its parent frame, but it happened and the below fixed it.

My html structure frame. Inside each column is the content which does not determine the width of this parent frame itself, but is given a max width by its parent

<div class="row">
<div class="col-md"></div>
<div class="col-md-3"></div>
</div>

Watch video of fix

Classic CSS class for ellipsis overflow that caused the error

.overflow-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Better procedure to ensure that overflow does not occur

.overflow-txt {
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
}