Struggling to come up with a name for this issue, so I apologize if it's unclear. Basically, I am working on a tabbed module where the .right div always stays the same height.
The .left div contains the links/tabs, but I don't want its height to match the .right divs.
For example, in the following approach, I want the div with the text "Content" to have an auto height (matching the text height).
Approach:
.parent {
display: flex;
flex-direction: column;
}
.flex-row{
display: flex;
flex-direction: row;
}
.left,
.right {
flex-basis: 50%;
}
.left {
border: 1px solid blue;
}
.right {
background: red;
min-height: 200px;
width: 200px;
}<div class="parent">
<div class="flex-row">
<div class="left">Content</div>
<div class="right"></div>
</div>
<div class="flex-row">
<div class="left">Content 2</div>
</div>
</div>So something like this:
https://i.sstatic.net/rGSXq.png
I've managed to achieve the above by simply using
<div class="left">Content<br>Content 2</div>