文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么CSS百分比(%)高度应用于flex元素的孙子元素？

问为什么CSS百分比(%)高度应用于flex元素的孙子元素？
EN

Stack Overflow用户

提问于 2020-05-22 02:54:00

回答 2查看 102关注 0票数 4

我正在尝试检查CSS的100%高度属性是如何工作的。但有一件事我不明白。

为什么在.flex-grand-child (Chrome)上100%的高度可以完美的工作？.flex-child是否有height属性？那么为什么它还能起作用呢？

这是JSFiddle

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-parent {
  flex: 1 0 auto;
  display: flex;
}

.flex-child {
    width: 300px;
}

.flex-grand-child {
   height: 100%;
   background-color: green;
}

<div class="container">
    <div class="flex-parent">
        <div class="flex-child">
          <div class='flex-grand-child'></div>
        </div>
    </div>
</div>

html

css

flexbox

回答 2

Stack Overflow用户

发布于 2020-05-22 03:33:26

.flex-parent元素应用了flex-grow: 1，使其具有.container的完整高度(height: 100%)。它还应用了display: flex，使其成为flex容器。

后一项设置会自动触发align-items: stretch，这会导致flex项- .flex-child -扩展容器的整个高度。所以.flex-child会计算到height: 100%。

现代浏览器现在接受flex height作为具有百分比高度的子项的参考点，将flex项的子项- .flex-grand-child -设置为父项的完整高度，即height: 100%。

更多详细信息请访问：Chrome / Safari not filling 100% height of flex parent

票数 0

Stack Overflow用户

发布于 2020-05-22 03:08:00

您拥有作为flex容器的.container，它的flex-direction为flex-direction，因此默认情况下，子元素将拉伸为fill。因此，.flex-parent正在扩展以填充.container。

由于.flex-parent也是一个flex容器，因此.flex-child正在扩展以满足这一需求。

最后，由于.flex-grand-child的高度为100%，因此它也填充了整个区域。

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61941815

复制

相似问题

问为什么CSS百分比(%)高度应用于flex元素的孙子元素？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么CSS百分比(%)高度应用于flex元素的孙子元素？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么CSS百分比(%)高度应用于flex元素的孙子元素？
EN