Question

在此codepen中，孩子的父母高度超出了父母的高度，但为什么flex父母身高却不随孩子一起增长？

我可以使用[.papa]来实现它，但是我希望它具有灵活性。

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;
}

Answer 1

这是逻辑行为，它是flexbox算法的工作方式。首先，让我们删除一些属性，尤其是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项目，其高度将等于其父代的高度，因为默认情况下将对齐方式设置为 stretch （因此min-height:100%在这种情况下毫无用处）。我们还使父元素成为具有列方向的弹性容器。

现在，让我们考虑child元素。它们的总高度将超过其父代的高度，因此它们将平均缩小以适合其内部，因为这是默认行为，并且即使您在其上定义了flex-shrink:0，父代也不会随它们一起增长，因为没有缩小的余地对于父元素，仅是因为其遵循其flex容器内的行方向并且没有宽度溢出。

如果将flex-shrink:0添加到子项，它们将不会缩小并且它们将溢出其父项，但不会强制其父项与它们一起成长，因为父项的高度是通过拉伸在其自己的flex容器中定义的行为。

现在，如果您更改grand-parent元素的对齐方式，则父元素将增大，因为它的高度现在将由其内容的高度而不是拉伸行为定义，并且您还将注意到{{1 }}不会对子元素执行任何操作：

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;
}

为什么嵌套的flex父级高度不会随子级一起增长？

1 个答案: