I have a wrapper and two flexbox containers with some divs in them that have some text.
One container has display: inline-flex, the other display: flex.
The wrapper has a set width of 100px.
Children of the container are restricted from shrinking or growing.
The second container behaves as expected. But the first one... I can't figure it out.
The first container leaks out of the wrapper. All is good. But it doesn't leak out all the way to accommodate for all the content that is in there. For some reason it stops abruptly at a seemingly random point. I'd expect it either to cover all its children and leak out fully, or to only go as long as the parent wrapper allows.
I have deducted that explicitly setting width on children solves that issue. Making the wrapper wider solves that issue. Making children have flex-basis: 0; solves this issue. I also noticed that the reason it stops before it fully wraps around all the children must not be random. It is still dependent on how much content the children have, but it seems although it only uses a fraction of the children widths' to calculate its own width.
I am completely lost here. I don't know why this is a problem in the first place. The container works great and expected when the wrapper is wider than it is, but it starts to get weird when the wrapper is thinner than the container. It's just overflow, why doesn't it work as expected?
.wrapper { background-color: black; padding: 8px; width: 100px; box-sizing: border-box;}#container { display: inline-flex; gap: 4px; background-color: #ddd; padding: 8px;}#container > * { flex: 0 0 auto; align-self: start; box-sizing: border-box; padding: 4px; background-color: #eee; width: auto;}#container2 { display: flex; gap: 4px; background-color: #ddd; padding: 8px;}#container2 > * { flex: 0 0 auto; box-sizing: border-box; padding: 4px; background-color: #eee; width: 60px;}<div class="wrapper"> <div id="container"><div>div A</div><div>div B</div><div>div C</div><div>div D - more content</div></div></br><div id="container2"><div>div A</div><div>div B</div><div>div C</div><div>div D - more content</div></div></div>Please explain. I'm losing my sanity over this.