当子项高度设置为自动时，Flexbox 限制子项高度答案

【问题标题】：Flexbox limits child items height when child item height is set to auto当子项高度设置为自动时，Flexbox 限制子项高度
【发布时间】：2020-11-20 02:54:41
【问题描述】：

我有三个 div：outer、inner、deeper，其中每个都是下一个的父级。

“Deeper”的高度设置为固定值，而“inner”的高度设置为 auto。

我希望“内部”高度与“更深”高度相同，但事实证明，只要“外部”显示设置为 flex，它就会受到“外部”高度的限制。

但是，当“外部”显示设置为“阻止”时，它会按预期工作。

为什么会这样？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
  overflow-y: auto;
  border: 1px solid gray;
  display: flex;
}

.inner {
  margin: 50px 0;
  background-clip: content-box;
  height: auto;
}

.deeper {
  height: 600px;
  width: 200px;
  background-color: red;
}

<div class="outer">
  <div class="inner">
    <div class="deeper"></div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我认为您的期望是错误的。看下面的代码：

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
/*  overflow-y: auto;*/
  border: 1px solid gray;
  display: block;
}

.inner {
/*  margin: 50px 0;*/
/*  background-clip: content-box;*/
  height: 500px;
  background-color: #242;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
<div class="outer">
  <div class="inner">
<!--    <div class="deeper"></div>-->
  </div>
</div>
    
</body>
</html>

这是一个非常简单的例子。在这种情况下，我评论了“更深”的 div。我还评论了“溢出”和“背景剪辑”属性，因为我认为它们与“高度”的问题无关。

我想说的是，在这种情况下，我们有一个带有“display:block”和固定“height”的“.outer”div。在那个 div 中，我们有另一个“height:500px”的 div，它比他的父母高。你可能只会看到这个 500px 的 div。但是如果你“检查”你会注意到“.outer”div的高度是400px。所以我们可以得出结论

如果我们有一个带有“display:block”和“固定高度”的标签，这个标签的高度不会根据它的孩子而改变。

所以在“你的问题”的情况下，我们有“.inner” div，它的子元素是“.deeper” div。 “.inner” div 具有“display:block” 并且具有固定高度，因为：

“align-items”属性，其初始值为“stretch”，使具有“display:flex”的 div（即“.inner”div）的子级具有其父级的高度（意味着“.inner”的高度为“400px”）

所以根据我们的结论，“.inner”的高度不会随着“.deeper”的高度而改变。

【讨论】：

我认为你错过了重点，整个问题特别发生在“更深”高度设置为固定值但“内部”不是时（因此它默认为自动并应根据其子级调整大小)。
是的，您是这样编写代码的。但是因为您为“.inner”的父级设置了“display:flex”，并且因为“align-items”属性的初始值为“stretch”，所以浏览器将“.outer”的高度设置为“.inner” .

【解决方案2】：

在这里我发布了另一个代码以更好地展示我之前的结论。在此代码中，您可以将“display:flex”更改为“display:block”以在检查窗口中查看效果。

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
  border: 1px solid gray;
  display: flex;
  /* the above "display:flex" makes the children of this tag to have the fixed height. */
}

.inner {
  height: auto; /* the height defined here does not affect, you can inspect the tag to see that the height is "400px". */
  background-color: #242;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="outer">
  <div class="inner">
  </div>
</div>

</body>
</html>

【讨论】：