Expand child height based on taller sibling (parent height set to auto)

Question

Simple question (snippet below) :

• <ul> with display: flex
• each <li> should have the same size and together must occupy the full width of the <ul>
• each <li> has a <a> which the content may have 1 or 2 lines of text.
• each <li> has height set to auto to adjust to the <a> content

My problem:

I need the "one-line" links to auto expand to the height of the "two-line" links. Setting height: 100% doesn't work because their parent height it's intentionally set to auto to adjust for content.

But in some cases I'll get two-line links, and some cases all will be one-line. So I need the one-line links to auto-expand when that happens.

How is this possible?

 #root { width: 140px; box-sizing: border-box; } ul { display: flex; justify-content: space-between; margin: auto; padding: 0; } li { flex-grow: 1; flex-basis: 30px; list-style-type: none; display: inline-block; border: 1px dotted blue; height: auto; } a { cursor: pointer; border: 1px dotted green; display: inline-block; background-color: lightblue; padding: 8px 0px; } 

 <div id="root"> <ul> <li><a>Link 1</a></li> <li><a>Long Link 2</a></li> </ul> </div> 

Answer 1

you can omit padding from top and bottom of the anchor and use height 100% a{height: 100%;}

 #root { width: 140px; box-sizing: border-box; } ul { display: flex; justify-content: space-between; margin: auto; padding: 0; } li { flex-grow: 1; flex-basis: 30px; list-style-type: none; display: inline-block; border: 1px dotted blue; height: auto; } a { cursor: pointer; border: 1px dotted green; display: inline-block; background-color: lightblue; height: 100%; } 

 <div id="root"> <ul> <li><a>Link 1</a></li> <li><a>Long Link 2</a></li> </ul> </div> 

Answer 2

You don't need to use inline-block with flex. Just use display: flex for li and display: block for a . Finally, add the width: 100% for a . It seems match your requirement.

 #root { width: 140px; box-sizing: border-box; } ul { display: flex; justify-content: space-between; margin: auto; padding: 0; } li { flex-grow: 1; flex-basis: 30px; list-style-type: none; display: flex; border: 1px dotted blue; height: auto; } a { cursor: pointer; border: 1px dotted green; display: block; background-color: lightblue; padding: 8px 0px; width: 100%; } 

 <div id="root"> <ul> <li><a>Link 1</a></li> <li><a>Long Link 2</a></li> </ul> </div>