Question

我正在观察以下行为。

此代码：

<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，不是吗？

demo

1 个答案:

答案 0 :(得分：2)

Answer 1

来自the specification

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

然后是整套 complex 规则和：

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



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



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

基本上，我们需要查看该百分比是否可以在没有周期性周期性变化的情况下解决。

在第二种情况下，您将容器定义为具有min-height，这意味着其高度将由其内容定义，因此我们需要首先知道内容高度才能找到容器的高度，这将使percetange的高度无法自动运行，因为我们无法解析它，因为我们只有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项目的高度，并且那些属性也考虑内容！

A flex item cannot shrink past its content的大小，这就是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; DR

flex项（当flex方向为column且flex容器具有明确的高度时）将具有由flex属性定义的高度，并考虑其中的内容（基本上，内容将仅设置min-height约束），然后在计算出该高度后，浏览器可以解析其中所有项目的高度的任何百分比值。

这是一个相关的问题，其中我们存在类似的问题，并且能够解决百分比值：Why is my Grid element's height not being calculated correctly?

身高/分的行为身高和显示：屈曲

1 个答案: