Grid and .row, layout breaking

[jsadlergccaz]

Hi all,

While looking at our Drupal sites, which are utilizing Bootstrap 5.3, I came across an issue with the layout breaking when using some elements with some x styles/attributes in the main content area (I haven't really been able to put my finger on it).

Our pages are arranged using grid like:

| div.sidebar.sidebar-first.col-md-3.order-md-first | | main.col.main-content | | div.sidebar.sidebar-second.col-md-3.order-md-last |

What happens is for some types of content in the main-content area of the page, like we use a Paragraph bundle for image slideshows which are responsive and will size down as needed, it breaks the layout so that it looks like:

| div.sidebar.sidebar-first.col-md-3.order-md-first |
| main.col.main-content |
| div.sidebar.sidebar-second.col-md-3.order-md-last |

After hitting my head on my desk for a while trying to figure out what exactly is breaking this layout, I found that if I use the following CSS then everything appears as it should:

.row > * {
  min-width: 1px;
}

with my CSS tweak:

without my CSS tweak:

For what it's worth, changing the selector from .row > * to main#content also looks to fix the issue.

Few questions...

1. Has anyone else encountered this?
2. Is this maybe something that is missing from Bootstrap out-of-the-box?
3. Does anyone see any issues with using this in a production environment? I haven't come across anything that visually stands out on any page.

Thanks in advance! :)