Attempting to outline the limitations at hand.
We have 3 containers named .content, .left, and .bottom, along with a resize handler that governs the available space.
- I aim for the
.containerto expand as the space increases, utilizing all available area. - The
.leftcontainer should maintain its minimum width and occupy 100% of the height, which is already achieved (excellent). - On the other hand, the
.bottomcontainer needs to retain its minimum height while occupying 100% of the width, which currently is not working as desired. - Modifying the HTML structure is not an option, given real-world constraints beyond my control.
After experimenting with various combinations of align-items: stretch and grow, I found it challenging to achieve the desired layout when the direction is set to row. Changing to a column layout would require altering the HTML structure, which is not feasible in this scenario.
.container {
display: flex;
flex-wrap: wrap;
height: 20rem;
width: 20rem;
overflow: hidden;
resize: both;
border: 1px solid blue;
}
.left {
border: 1px solid red;
}
.content {
border: 1px solid pink;
flex: 1;
}
.bottom {
border: 1px solid grey;
flex-basis: 100%;
}<div class="container">
<div class="left">left min content</div>
<div class="content">should resize vertically and horizontally</div>
<div class="bottom"/>bottom should be min content</div>
</div>