Safari:flexbox和最小高度 [英] Safari: flexbox and min-height

问题描述

我需要一个带有flexbox子级的可滚动flexbox容器.容器具有(通过flexbox)定义的高度，子代的高度应与其内容一样高.

I need to have a scrolling flexbox container with flexbox children. The container has a (by flexbox) defined height, the children should be just as high as their content.

这在Safari中非常有效，但在Safari中，孩子们不会超出容器的高度.实际上，Safari中的行为与孩子拥有min-height: 0的行为完全相同，但孩子却没有.显式设置min-height: auto没有帮助.

This works well except in Safari, where the children won't stretch beyond the container's height. Actually, the behavior in Safari is exactly the same as if the children had min-height: 0, but they don't. Explicitly setting min-height: auto doesn't help.

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>

我找不到针对Safari记录的最新flexbox错误，但是对我来说，这似乎是一个错误.我在MacOS(Catalina)的Safari 13以及iOS 12的Safari和Chrome中遇到了此问题.

I couldn't find any recent flexbox bugs documented for Safari, but for me this looks like one. I encountered this in Safari 13 on MacOS (Catalina) and in Safari and Chrome on iOS 12.

它们是仅CSS修复或解决此问题的方法吗?

Is their an CSS-only way to fix or work around this?

推荐答案

我不知道为什么，但是min-height: fit-content它可以按预期工作:

I don't know why, but min-height: fit-content it works as expected:

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>

这篇关于Safari:flexbox和最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！