I am working with a flexbox layout.
Here is the HTML code structure:
<div class="grid">
<div class="row">
<div class="column">Content</div>
<div class="column">Content2</div>
<div class="column">Content2</div>
</div>
<div class="row">
<div class="column">Content</div>
<div class="column">Content2</div>
<div class="column">Content2</div>
</div>
</div>
And here is the corresponding CSS:
.grid {
overflow: auto;
width: 500px;
height: 400px;
background-color: #eee;
display: flex;
flex-direction: column;
}
.row {
background-color: #ddd;
align-items: stretch;
display: flex;
border: 2px solid black;
}
.column {
flex: 1 0 20em;
padding: 0.2em;
border: 2px solid lightblue;
/*background-color: hsla(0, 100%, 80%, 50%);*/
}
(check https://jsfiddle.net/bz71qptu/1/)
In this scenario, the .box element does not expand to the full width of its children. How can I make it achieve this?
Edit
I have updated the jsfiddle with an example of the desired visual outcome.
Edit 2
I had to modify the question slightly based on my specific issue. The parent element has flex-direction: column alignment, making the use of min-width ineffective. The solution involving min-width would be ideal if not for this limitation.
Edit 3
I appreciate all the assistance provided so far, but I still cannot achieve the exact behavior I am aiming for in my example. Despite following the advice given, I seem unable to get it to function as needed. A more detailed jsfiddle has been created with visible borders for clarity. After reviewing the responses and attempting to apply them to my case, I am still struggling to reach the desired result. Apologies if this fiddle has already been addressed.