使左div的高度变紧而不会影响父级中的其他div

Question

Was unsure on how to name this one, so apologies if it's confusing. Basically, I'm creating a tabbed module where the .right div is always the same height.

The .left div houses the links/tabs, but I want this div's height not to match the .right ones.

For example, in the below approach, I want the div with the text "Content" to be auto (match 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:

I've achieved the above by just doing <div class="left">Content<br>Content 2</div> for demo purposes.

Answer 1

Use left as a flex container, and add two children to it. Then, set first child's height property to 100%. Like this:

 .parent { display: flex; flex-direction: column; } .flex-row { display: flex; flex-direction: row; } .left, .right { flex-basis: 50%; } .left { border: 1px solid blue; display: flex; flex-direction: column; } .row1 { height: 100%; } .row2 { background-color: lightblue; } .right { background: red; min-height: 200px; width: 200px; } 

 <div class="parent"> <div class="flex-row"> <div class="left"> <div class="row1"> Content </div> <div class="row2"> Content2 </div> </div> <div class="right"></div> </div> </div>