IT技术 - height/minHeight 和 display:flex 的行为 - 吾爱随笔录

height/minHeight 和 display:flex 的行为

IT技术 html css reactjs flexbox

2021-05-03 03:09:13

我正在观察以下行为。

这段代码：

<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <div container style={{ flex: 1, border: "2px solid green" }} />
      <div style={{ minHeight: 300, border: "1px solid blue" }}>
        <div id="map" style={{ border: "3px solid red", height: "100%" }} />
      </div>
</div>

结果如下：

看到红色边框，似乎带有 id 地图的 div 占据了一些高度。

现在，如果我对上面的代码进行单一更改，并将顶部 div 的高度更改为 minHeight：

<div
      style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}
    >
      <div container style={{ flex: 1, border: "2px solid green" }} />
      <div style={{ minHeight: 300, border: "1px solid blue" }}>
        <div id="map" style={{ border: "3px solid red", height: "100%" }} />
      </div>
</div>

您可以看到下面的屏幕截图，红色边框，地图不再有高度。

看起来很奇怪为什么玩顶部 div 会以这种方式影响带有 id 映射的 div ......不是吗？

演示

1个回答

从规范

有时，百分比大小的框的包含块的大小取决于框本身的内在大小贡献，从而产生循环依赖。在计算此类框的内在大小贡献时（包括对基于内容的自动最小大小的任何计算），循环百分比......

然后是一整套复杂的规则和：

然后，除非另有说明，否则在计算包含块内容的使用大小和位置时：

如果循环依赖是由于包含块上的块大小或最大块大小而引入的，导致它依赖于其内容的大小，则不会解析框的百分比，而是表现为自动。

否则，将根据包含块的大小解析百分比。（包含块的大小不会根据框的结果大小重新解析；因此内容可能会溢出或下溢包含块）。

基本上我们需要看看百分比是否可以在没有任何循环依赖的情况下解决。

在第二种情况下，您将容器定义为具有 a min-height，这意味着它的高度将由其内容定义，因此我们需要首先知道内容高度以找到容器的高度，这将使百分比高度无法自动，因为我们无法解决它，因为我们只有min-height:300px并且还需要根据内容找到高度。

在第一种情况下，您定义了容器，height:100%因此定义了高度，但我们仍然只有min-height在子元素中。这里有点复杂，因为可以使用 flex 属性找到该元素的高度。基本上浏览器可以在不知道其内容的情况下解析该元素的高度，然后使用计算出的高度来解析百分比值。

这是一个基本示例，可以更好地说明：

显示代码片段

.box {
  display: flex;
  flex-direction: column;
  border:1px solid red;
  margin:10px;
}

.box>div {
  border: 1px solid;
}

.height {
  height: 80%;
  background: red;
}

<div class="box" style="min-height:200px;">
  <div style="min-height:100px;">
    <div class="height">content here</div>
  </div>
</div>

<div class="box" style="height:200px;">
  <div style="min-height:100px;">
    <div class="height"> content here</div>
  </div>
</div>

<div class="box" style="height:200px;">
  <div style="flex-basis:50%;">
    <div class="height"> content here</div>
  </div>
</div>

<div class="box" style="height:200px;">
  <div style="flex-grow:1;">
    <div class="height"> content here</div>
  </div>
</div>

您可以看到，在定义了 flex 容器高度的所有情况下，我们都能够解析嵌套元素的百分比高度，因为浏览器能够在不需要内容的情况下计算高度。

实际上，内容也用于定义高度，这增加了更多的复杂性。让我们考虑以下示例：

显示代码片段

.box {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  margin: 10px;
}

.box>div {
  border: 1px solid;
}

.height {
  height: 80%;
  background: red;
}

<div class="box" style="height:200px;">
  <div style="flex-basis:50%;">
    <div class="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
      Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
       Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div>
  </div>
</div>

您可以看到文本溢出了红色 div（它的容器）并且 flex 项的高度与文本的高度匹配。在这种情况下，浏览器仍然能够根据 flex 属性识别 flex 项的高度，这些属性也考虑了内容！

弹性项目不能缩小超过其内容大小，这就是为什么flex-basis:50%不给出50%父高度，而是给出50% 和内容高度之间的最小值。

如果您添加，min-height:0您将有不同的行为：

显示代码片段

.box {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  margin: 10px;
}

.box>div {
  border: 1px solid;
}

.height {
  height: 80%;
  background: red;
}

<div class="box" style="height:200px;">
  <div style="flex-basis:50%;min-height:0">
    <div class="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
      Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
       Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div>
  </div>
</div>

现在 flex 项采用50%父高度（忽略其内容），然后其子元素采用80%该高度，内容在逻辑上溢出。

TL; 博士

一个 flex 项目（当 flex 方向是列并且 flex 容器具有明确的高度时）将由 flex 属性定义其高度并考虑里面的内容（基本上内容只会设置min-height约束）然后在计算该高度后浏览器可以解析内部项目的高度的任何百分比值。

这是一个相关的问题，我们有一个类似的问题，我们可以解决百分比值：为什么我的 Grid 元素的高度没有被正确计算？

其它你可能感兴趣的问题

上一篇在这种设置中，PC 会被认为是食品安全的吗？下一篇我的 DIY 打印机仅在我的所有限位器都被触发时启动。这是为什么？