maxedison maxedison - 29 days ago 9
CSS Question

Flexbox inside list item doesn't align to the top of the list item

Putting a flexbox inside of a list item is causing the content to get pushed down by what appears to be a full line height.

I've been playing around with different CSS properties, such as giving the flexbox

margin-top: 0
, its children
margin-top:0
, adding
flex-wrap
to the flexbox, etc. No dice!



.wrapper {
display: flex;
}
li {
background: #ccc;
}

<ul>
<li>
<div class="wrapper">
<div>hello</div>
<div>world</div>
</div>
</li>
</ul>





codepen

Answer

I'm currently not sure what's causing the behavior, but if you switch .wrapper from display: flex to display: inline-flex, the issue seems to be resolved.

revised codepen

Comments