文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么嵌套的flex父母的身高不随孩子增长？

问为什么嵌套的flex父母的身高不随孩子增长？
EN

Stack Overflow用户

提问于 2018-08-14 05:35:29

回答 1查看 5.6K关注 0票数 2

在这个码页中，子级溢出父级高度，但是为什么弹性父级高度不随子级增长？

我可以使用display:block来实现它，但我希望它是灵活的。

html,body{
  height:100%;
}
.grand-parent{
  height:100%;
  overflow:auto;
  display:flex;
}
.parent{
  display:flex;
  flex-direction:column;
  min-height:100%;
  flex-shrink:0;
  width:100%;
}

.child{
  height:1500px;
  width:100%;
  display:flex;
  flex-shrink:0;
}

.green{
  background:green;
}

.blue{
  background:blue;
}

<div class="grand-parent">
  <div class="parent">
    <div class="child green"></div>
    <div class="child blue"></div>
  </div>
</div>

css

flexbox

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-14 09:13:15

这就是柔性盒算法的逻辑行为及其工作原理。首先，让我们移除一些属性，特别是flex-shrink:0。

html,body{
  height:100%;
  margin:0;
}
.grand-parent{
  height:100%;
  overflow:auto;
  display:flex;
}
.parent{
  display:flex;
  flex-direction:column;
  min-height:100%;
  width:100%;
}

.child{
  height:1500px;
  width:100%;
  display:flex;
}

.green{
  background:green;
}

.blue{
  background:blue;
}

<div class="grand-parent">
  <div class="parent">
    <div class="child green"></div>
    <div class="child blue"></div>
  </div>
</div>

我们可以清楚地看到，我们有无溢出，因为该算法将缩小元素以适应它们的父容器。

最初，我们将html,body定义为height:100% (没关系)，然后将grand-parent定义为height:100%，并定义为具有行方向的flex容器(没关系)。然后，我们将.parent元素设置为min-height:100%，因为它是一个flex，因此它的高度将与其父元素的高度相等，因为默认情况下，对齐设置为Extension(因此min-height:100%在这种情况下是无用的)。我们还将父元素设置为具有列方向的flex容器。

现在，让我们考虑一下child元素。它们的总高度将超过其父元素的高度，因此它们将同样缩小以适合其父元素，因为这是默认行为，即使您在其父元素上定义了flex-shrink:0，父元素也不会与其父元素一起增长，因为父元素没有什么可收缩的，仅仅是因为它遵循的是其柔性容器中的行方向，并且没有宽度溢出。

如果将flex-shrink:0添加到子容器中，则它们不会溢出父节点，但不会强迫其父节点与其父节点一起增长，因为父节点的高度是通过扩展行为在其自己的flex容器中定义的。

现在，如果更改grand-parent元素的对齐方式，父元素将增长，因为它的高度现在将用其内容的高度而不是拉伸行为来定义，并且您还会注意到，flex-shrink:0不会对子元素执行任何操作：

html,body{
  height:100%;
  margin:0;
}
.grand-parent{
  height:100%;
  overflow:auto;
  display:flex;
  align-items:flex-start;
}
.parent{
  display:flex;
  flex-direction:column;
  min-height:100%;
  width:100%;
}

.child{
  height:1500px;
  width:100%;
  display:flex;
  flex-shrink:0;
}

.green{
  background:green;
}

.blue{
  background:blue;
}

<div class="grand-parent">
  <div class="parent">
    <div class="child green"></div>
    <div class="child blue"></div>
  </div>
</div>

票数 1

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

原文链接：

https://stackoverflow.com/questions/51834332

复制

相似问题

问为什么嵌套的flex父母的身高不随孩子增长？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么嵌套的flex父母的身高不随孩子增长？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么嵌套的flex父母的身高不随孩子增长？
EN