I have a div that contains multiple other divs, for 2 of those I want to make sure that the parent div is at least as wide as those child divs, for the third I want it to scroll if it gets too big.I can get it so the one div scrolls, but then the other ones overflow. I can make sure the others don't overflow but then the middle one expands instead of scrolling.
I have a code pen that illustrates the target page in full: https://codepen.io/foaly/pen/PwZZWqB
When I change the min width in the.horizontal-block-70, .horizontal-block-30to 0 the scrolling part works, if I change it to min-content the stretching of the headers work, but the middle div grows and won't scroll.
You can also reproduce the issue like this:
this way the a div grows to contain the b content
div {display:flex; flex-direction: column}[a] { border: 1px solid black; min-width: min-content; width: 5rem }[b] {min-width: min-content}[c] {flex: 1 1 auto; min-width: 0; overflow-x: auto}<div a> <div b>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div><div c> cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</div></div>this way it scrolls the c's":
div {display:flex; flex-direction: column}[a] { border: 1px solid black; min-width: 0; width: 5rem }[b] {min-width: min-content}[c] {flex: 1 1 auto; min-width: 0; overflow-x: auto}<div a> <div b>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div><div c> cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</div></div>How can I combine this into one solution?