3

我需要一个带有 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>

我找不到任何最近为 Safari 记录的 flexbox 错误，但对我来说，这看起来像一个。我在 MacOS (Catalina) 上的 Safari 13 和 iOS 12 上的 Safari 和 Chrome 中遇到了这个问题。

他们是修复或解决此问题的纯 CSS 方法吗？

4

2 回答 2

6

我不知道为什么，但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>

于 2020-01-28T10:32:27.133 回答
0

这是修复的根本问题：https ://github.com/philipwalton/flexbugs#flexbug-1

于 2020-08-30T22:23:19.977 回答