Auto-layout column (col with no number) allows wide content to break the grid

[chrisblakley]

Operating system: macOS 11.3.1 (M1) Browser: Chrome v91.0.4472.114 (M1) It does appear on other OSes and Browsers as well.

Codepen Test Case: https://codepen.io/chrisblakley/pen/abWpvwZ?editors=1100

What is happening

When using an auto-layout column (a col with no number), the content width inside of it can affect other columns and cause them to reflow if it is too wide. Using a set column number, this does not happen.

What specifically is happening in my case is another JS library (Datatables in this instance) is trying to "fill" the space of its parent which is inside a col. The sidebar, which is a col-4 ends up getting reflowed into a new row because the table ends up wider than that col.

Expected behavior

The columns set the layout and the content within them should not be able to incidentally affect other columns. If I want a sidebar of 4 columns, the remaining columns should not change that no matter how wide the content within them is. I would expect the content to overflow the column without reflowing the next column to a new "row".

I could use col-8 and col-4 but that restricts the flexibility of the layout whereas col and col-4 would work perfectly.

I noticed this in Bootstrap v5, but in the Codepen I tried setting it back to 4.6.0 and it acts the same.

Note: while this is similar to #34335 it is not related.

Thanks for your time.

[mdo]

I think this is to be expected with an auto-sizing flex box column. I don't know how we can make the column grow and shrink, but only some of the time :). Have you had any other luck on this since you opened the issue?

[nicholasbrantley]

I am having this issue but with responsive tables, present in Bootstrap 5.3.2.

When a responsive table is inside an auto-layout column (col with no number), if the table is too wide I expect the table to become responsive and be scrollable, not make the column overflow to the next row.

https://codepen.io/nickno95/pen/vYbvzrj