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

Ввод flexbox внутри элемента списка приводит к тому, что содержимое будет отбрасываться на то, что выглядит как полная высота строки.

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

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

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

Ответ 1

Это связано с псевдоэлементом ::marker.

Я точно не знаю, что должно произойти, потому что это перекрытие различных спецификаций

И это проблематично, потому что это предложения, не готовые к реализации. См., Например, предупреждение в Списки CSS 3 - Маркеры позиционирования, что также актуально в этом выпуске:

Этот раздел не готов к реализации. Это недооцененный черновик, который даже не был проверен надлежащим образом для Веб-совместимость. Не стесняйтесь отправлять отзывы, но НЕ ПОЛЬЗУЙТЕ ЭТУ ЧАСТЬ СПЕКА.

Ниже я догадываюсь, как Chrome обрабатывает маркеры под капотом.

Сначала используйте более простой list-style-position: inside в элементе списка и пусть он содержит блок:

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

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

Ответ 2

Решение

Если вы переключите .wrapper с display: flex на inline-flex, проблема будет решена (демонстрация).

Если вы установите list-style-type на none, проблема будет устранена (кредит @Ricky_Ruiz в комментариях) (демо).

Поведение браузера

Проблема существует в Chrome, Edge и IE11. Исходный код отлично работает в Firefox и Safari.

Описание

В настоящее время я не уверен, что вызывает поведение.

По какой-то причине (по-видимому, маркер) верхняя часть li отключена. Родитель не разрешает детям получать доступ к этой области.

( ОБНОВЛЕНИЕ: Подробное объяснение предоставлено в другом ответе.)

При тестировании...

Я удалил padding и margin из ul и потомков. Это не помогло.
Я играл с line-height и vertical-align. Также не помогло.

Установив равную высоту для всех элементов, ясно, что что-то заставляет контейнер flex отображать ниже ожидаемого и переполняет родительский элемент.

ul {
  padding: 0;
  margin: 0;
  height: 100px;
  border: 1px solid black;
}
li {
  padding: 0;
  margin: 0;
  background: #ccc;
  height: 100%;
}
.wrapper {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  border: 1px dashed red;
}

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

Ответ 3

Добавление display: block в свойства стиля li разрешает это. По умолчанию стили пользовательского агента будут устанавливать элементы li для отображения как list-item. Спецификации flexbox не учитывают это, вместо этого определяют поведение только для блоков, встроенных и встроенных блоков (а также таблицы -элементные элементы, которые вызывают элементы гибкости на уровне блока).