时间戳

首页 > 解决方案 > 当父级使用 flex 并且元素没有内容时，Flex 子级会在容器上生长

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

问题描述

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

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 溢出了文章。

文章中 p 溢出

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

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

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

标签： htmlcssflexbox

解决方案

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

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

推荐阅读