Disable column wrapping in Bootstrap 4

Question

I'm currently faced with the following situation:

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

So, the first column will occupy the space available that is not being filled by the second column

i.e. [ |--------column1--------| |column2| ]

My issue is when the content inside column1 has a width larger than the containing row. What happens is, instead of column1 shrinking to still fit both columns in the same row line, column1 fills the whole row as if it was col-12 and column2 drops down to a new line, hence wrapping the columns.

Is there way to prevent this behaviour and always keep both columns in the same line?

Answer 1

Normally the flex-nowrap class can be used on the row to prevent col wrapping in Bootstrap 4. In this case that won't work because of the wide, ellipsis content in the column.

Due to the way flexbox width is calculated (explained here and here), you should set a width, min-width, or max-width (any width) on the flex-grow:1 column (col).

For example, set width:0 on the col...

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

https://codeply.com/go/JKLUD0NLn4

Also, don't use both col and col-auto on the same column. The flex-grow:1 of col, will prevent the col-auto from shrinking.