CODEWITHSUNDEEP
cssflexbox
Mostafa Darwish
Mostafa Darwish

Reputation: 283

Flex box children have height 100% of the parent


the following is my menu structure:

<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>

</ul>


as you noticed the second menu have a height different than other siblings cause of it's content

so take alook at the css

ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}


this will display ul as a menu with items side by side in the center of the containing parent "ul" but unfortunately with different height
so how i can make children have the 100% of their parent using flexbox without adding custom height in pixel?

Upvotes: 0

Views: 1906

Answers (1)

2507rkt3
2507rkt3

Reputation: 21792

Put an align-self: stretch on the ul>li.

Check out the sample : http://cssdeck.com/labs/full/nttaiab7/

Upvotes: 1

Related Questions