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

Question

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>

Answer 1

This seems due to the ::marker pseudo-element.

I don't know exactly what should happen because this is an overlap of various specs

• CSS Display 3 - the list-item keyword
• CSS Pseudo-Elements 4 - the ::marker pseudo-element
• CSS Lists and Counters 3 - The ::marker pseudo-element

And it's problematic because they are proposals not ready for implementation. See for example the warning in CSS Lists 3 - Positioning Markers, which is also relevant in this issue:

This section is not ready for implementation. It is an unreviewed rough draft that hasn’t even been properly checked for Web-compatibility. Feel free to send feedback, but DON’T USE THIS PART OF THE SPEC.

The following is my guess of how Chrome handles markers under the hood.

First, let's use the simpler list-style-position: inside on the list item, and let it contain a block:

ul {
  list-style-position: inside;
}
li {
  border: 1px solid blue;
}
div {
  border: 1px solid red;
}

<ul>
  <li>
    <div>Hello<br />world</div>
  </li>
</ul>