为什么嵌套的flex父级高度不会随子级一起增长? [英] Why doesn't the nested flex parent height grow with children?

问题描述

在此 codepen 中，子代会溢出父代身高，但为什么flex父代身高却没有和孩子一起成长?

In this codepen the children overflow the parent height but why does the flex parent height not grow with children?

我可以使用display:block来实现它，但是我希望它具有柔韧性.

I can use display:block to achieve it, but I would want it to be flex.

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>

推荐答案

这是逻辑行为以及flexbox算法的工作方式.首先，让我们删除一些属性，尤其是flex-shrink:0.

This is the logical behavior and its how the algorithm of flexbox works. To start, let's remove some properties especially the 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>

我们可以清楚地看到，我们没有没有溢出，因为该算法会缩小元素以适合其父容器.

As we can clearly see, we have no overflow because the algorithm will shrink the elements to fit their parent container.

最初，我们将html,body定义为height:100%(可以)，然后将grand-parent定义为height:100%和具有行方向的flex容器(可以) ).然后，我们将.parent元素设置为min-height:100%，由于它是一个flex项目，其高度将等于其父代的高度，因为默认情况下将对齐方式设置为 stretch (因此min-height:100%在这种情况下毫无用处).我们还将父元素设置为具有列方向的flex容器.

Initially we have defined the html,body to be height:100% (it's ok) then we defined the grand-parent to be height:100% and a flex container with a row direction (it's ok). Then we made .parent element to be min-height:100% and since its a flex item its height will be equal to the height of its parent because the alignment is set by default to stretch (so min-height:100% is somehow useless in this case). We have also made the parent element to be a flex container with a column direction.

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

Now, let's consider the child elements. Their total height will exceed the height of their parent so they will shrink equally to fit inside it as this is the default behavior AND the parent will not grow with them even if you define flex-shrink:0 on it because there is nothing to shrink for the parent element simply because its following a row direction inside his flex container and there is no width overflowing.

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

If you add flex-shrink:0 to child they won't srink AND they will overflow their parent but will not force their parent to grow with them because the height of the parent is defined within its own flex container by the stretch behavior.

现在，如果更改grand-parent元素的对齐方式，则父元素将增大，因为它的高度现在将由其内容的高度而不是拉伸行为定义，并且您还将注意到flex-shrink:0会做子元素上没有任何内容:

Now if you change the alignment of the grand-parent element, the parent element will grow because its height will now be defined with the height of its content and not the stretch behavior and you will also notice that flex-shrink:0 will do nothing on the child elements:

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>

这篇关于为什么嵌套的flex父级高度不会随子级一起增长?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！