maxedison maxedison - 1 year ago 65
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
, adding
to the flexbox, etc. No dice!

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

<div class="wrapper">


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download