I'm trying to achieve the layout pictured below with flexbox. The width of the outer div (The column) is determined by the widest of the light grey divs (Item number 1 and down), and the text in the top div fills that width dynamically.
<div class="flex-column"><div class="text"><div class="text-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, ullam.</div></div><div class="item">Item number 1</div><div class="item">Item number 2</div><div class="item">Item number 3</div><div class="item">Item number 4</div><div class="item">Item number 5</div><div class="item">Item number 6</div><div class="item">Item number 7</div><div class="item">Item some other text and some more</div></div></div>Styles
.flex-column { display: inline-flex; flex-direction: column; padding: 10px; gap: 5px; } .item { background-color: #e0e0e0; padding: 5px; } .text { background-color: #c0c0c0; padding: 5px; display: flex; } .text-inner { flex-basis: 0; flex-shrink: 1; /* flex-grow: 1; */ }Putting the text inside a flex div (.text-inner) allows flex-basis to be used. Setting this to 0 along with flex-shrink: 1 prevents the text box from stretching the column wider than what the grey divs require, but the text shrinks to the width of the longest word, as pictured below.
If flex-grow is removed from .text-inner, then the text box stretches the whole column wider, until the text is on one line.
Can this be achieved with flexbox?
