当父级使用 flex 并且元素没有内容时，Flex 子级会在容器上生长答案

【问题标题】：Flex child grows over container when parent uses flex and elements have no content当父级使用 flex 并且元素没有内容时，Flex 子级会在容器上生长
【发布时间】：2019-08-18 13:50:54
【问题描述】：

我有这种奇怪的行为，我自己无法解释。

p {
  padding: 0;
  margin: 0;
}

.fc {
  display: flex;
  flex-direction: column;
}

.fc > article {
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;
  border: 1px solid #000;
}

.fc > article > .p1 {
    flex: 0 0 25%;
}

.fc > article > .p2 {
    flex: 1 1 75%;
    padding: 1rem;
    background-color: rgba(255, 255, 0, 0.2);
}

<div class="fc">
  <article>
    <p class="p1">Hello world</p>
    <p class="p2">
    Something texty
    </p>
  </article>
  
  <article>
    <p class="p1"></p>
    <p class="p2">
    Something texty
    </p>
  </article>
  
  <article>
    <p class="p1">Hello World 3</p>
    <p class="p2">
    Something texty
    </p>
  </article>
</div>

所以它基本上是一个使用 flex 的包装器 div，其中的文章本身就是 flex 容器。为了简单起见，我从 p 中删除了填充和边距（在原始代码中这些都是其他元素）

当第一个 p 中没有文本时，问题就开始了。不知何故，第二个 p 溢出了文章。

在 stackoverflow 中，我只使用浏览器中的“检查元素”来获得效果。如果将代码保存在html文件中，在浏览器中打开，就会得到效果。

一个可能的解决方法是使用px/rem 而不是% 作为flex-basis，但我想在这里有%。

我也可以在p 中使用&nbsp; 来解决这个问题，但这似乎更像是一个hacky 解决方案而不是真正的解决方案。

【问题讨论】：

我在 Chrome 或 firefox 上看不到这个，但很明显罪魁祸首是没有参考但内容本身的百分比值
如果你把代码保存在一个html文件中，然后在浏览器中打开，就会得到效果。你是不是把doctype放在最上面了？
@TemaniAfif 我用 chrome 对其进行了测试，确实在那里似乎没有问题。我用火狐。从developer.mozilla.org/en-US/docs/Web/CSS/flex-basis 开始，我可以使用百分比作为flex-basis 来作为父母主要尺寸的百分比
是的，并且父级没有定义大小，所以它的大小将基于它的内容，然后百分比将得到解决。一种复杂的循环，我说没有参考，因为大小没有明确定义

标签： html css flexbox

【解决方案1】：

如果您至少为第二个 p 定义一个最小高度，它应该可以解决问题。

.fc > article > .p1 {
    flex: 0 0 25%;
    min-height: 18px;
}

【讨论】：

虽然这有助于解决溢出问题，但输出与我的预期不同。我希望第一个 p 占整篇文章的 25%，第二个 p 占剩下的 75%
那么恐怕最好的解决方案是使用在那个 p1 里面。