Column width auto is not always spaced evenly

[2dareis2do]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

When using column width auto it should resize to fill the available space.

However, say I have three columns that all use .col class. they do not always space them selves to fill the available screen space

e.g. we have

.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bssk-gutter-x) * .5);
padding-left: calc(var(--bssk-gutter-x) * .5);
margin-top: var(--bssk-gutter-y);
}

From what I can tell the width property is simply not required. In fact this seems to be the source of the problems. i.e. the width does not adjust accordingly.

If I override this and set it explicitly to 0, the flex box seems to behave and respond correctly.

Please see attached screenshots

Reduced test cases

.row > * {
width: 100%;
}

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

5.3.3

[2dareis2do]

Actually the above fix needs to be more specific e.g.

.row > .col {
width: 0;
}

[github-actions[bot]]

Hello @2dareis2do. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[2dareis2do]

Thanks for your quick response.

Ok I have recreated the issue here

https://codepen.io/twodareis2do/pen/xxNGKPd

However I can't seem to replicate the same issue as on my local.

Will try and investigate further as it seems likely that something else is causing this behaviour (i.e. not bs)

[2dareis2do]

Ok, I was trying to reproduce the wrong page!

I have updated the demo (same link as per my previous post)

There should be three evenly spaced columns viewable and instead it shows the middle column to be wider than the others.

If you uncomment the last line of the css, the 3 columns are alligned correctly.

[mdo]

Your example is not a reduced test case—it's a rather complex page full of extra HTML. Closing until we get a more defined test case we can isolate to Bootstrap's components.