html - 当父级使用 flex 且元素没有内容时，Flex 子级在容器上增长

Question

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

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-container。为了简单起见，我从 p 中删除了填充和边距(在原始代码中，这些都是其他元素)

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

在 stackoverflow 中，我仅使用浏览器中的“Inspect Element”获得效果。如果将代码保存在html文件中，在浏览器中打开，就会得到效果。

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

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

Answer 1

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

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