I was trying to be smart and applied max-width: min(100%, 30em); to my elements that contain text. The result is that under some circumstances, the container of such an element takes up all horizontal space, but not always.
I'm just very curious, how this can be explained!
(I can circumvent that side effect by simply applying max-width: 30em;, but as these elements may be placed in containers narrower than that, I thought I'd be on the safe side by adding the min() function.)
.broken .child{ max-width: min(100%, 30em);}.okay .child { width: 100%; max-width: 30em;}.container{ display: inline-flex;}<h2>Broken</h2><div class="broken"><div class="container"><div class="child"><p>My container would take up all space if I contained more text.</p></div></div></div> <div class="broken"> <div class="container"><div class="child"><p>See! What is going on here? What is going on here? What is going on here? What is going on here? What is going on here? What is going on here? What is going on here? What is going on here?</p></div></div></div><h2>Okay</h2><div class="okay"><div class="container"><div class="child"><p>Here everything is okay, because instead of the clever max-width/min() combo, I've applied a width and a max-width on my parent.</p></div></div> </div>