Flexbox внутри элемента списка не выравнивается по верху элемента списка

Помещение flexbox внутри элемента списка приводит к тому, что содержимое выталкивается вниз на величину, равную полной высоте строки.

Я играл с различными свойствами CSS, такими как предоставление flexboxmargin-top: 0, ее детиmargin-top:0, добавивflex-wrap к флексбоксу и т. д. Никаких кубиков!

.wrapper {
  display: flex;
}
li {
  background: #ccc;
}
<ul>
  <li>
    <div class="wrapper">
      <div>hello</div>
      <div>world</div>
    </div>
  </li>
</ul>

codepen

Ответы на вопрос(3)

Ваш ответ на вопрос