Safari: flexbox и минимальная высота

Question

Мне нужен контейнер с прокруткой flexbox для дочерних элементов flexbox. Контейнер имеет (по flexbox) определенную высоту, дочерние элементы должны быть такими же высокими, как и их содержимое.

Это хорошо работает, за исключением Safari, где дочерние элементы не растягиваются выше высоты контейнера. На самом деле, поведение в Safari точно такое же, как если бы у детей было min-height: 0, но они этого не делают. Явная установка min-height: auto не помогает.

div {
  background-color: rgba(0,0,0,.1);
  box-sizing: border-box;
  margin: 4px;
  padding: 4px;
}

.fixed {
  height: 100%;
  left: 0;
  max-height: 400px;
  position: fixed;
  top: 0;
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  /* Safari behaves like min-height: 0; */
}

.full {
  flex: 1;
  overflow-y: auto;
}

.big {
  font-size: 200px;
  line-height: 1;
  margin: 0;
}

<div class="fixed">
  <div class="flex" style="height: 100%">
    <div>
      A
    </div>
    <div class="flex full">
      <div class="flex">
        B_1
      </div>
      <div class="flex">
        <p class="big">B_2</p>
      </div>
      <div class="flex">
        <p class="big">B_3</p>
      </div>
    </div>
    <div>
      C
    </div>
  </div>
</div>

Я не смог найти какие-либо недавние ошибки в flexbox, документированные для Safari, но для меня это выглядит так. Я сталкивался с этим в Safari 13 на MacOS (Catalina) и в Safari и Chrome на iOS 12.

Это CSS -единый способ исправить или обойти это?

Answer 1

Не знаю почему .... но min-height: fit-content

div {
  background-color: rgba(0, 0, 0, .1);
  box-sizing: border-box;
  margin: 4px;
  padding: 4px;
}

.fixed {
  height: 100%;
  left: 0;
  max-height: 400px;
  position: fixed;
  top: 0;
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  /* Safari behaves like min-height: 0; */
}

.full {
  flex: 1;
  overflow-y: auto;
}

.big {
  font-size: 200px;
  line-height: 1;
  margin: 0;
}

.min-fit {
  min-height: fit-content;
}

<div class="fixed">
  <div class="flex" style="height: 100%">
    <div>
      A
    </div>
    <div class="flex full">
      <div class="flex min-fit">
        B_1
      </div>
      <div class="flex min-fit">
        <p class="big">B_2</p>
      </div>
      <div class="flex min-fit">
        <p class="big">B_3</p>
      </div>
    </div>
    <div>
      C
    </div>
  </div>
</div>