在子级中使用 flex-basis 和长文本时，父级 flex 不会收缩

Question

我有一个父 flex，它有一个使用 flex-basis 来包装一些文本的子项。我希望父级只缩小到子级的内容，但它占用的空间 space 与不包装文本时所占的空间一样多。

.parent-flex {
  display: flex;
  background-color: blue;
}

.child-flex {
  flex: 0 1 442px;
  background-color: yellow;
}

<div class="parent-flex">
  <div class="child-flex">
    text lots and lots of text that goes on for a little while and wraps, ideally there should be no visible blue since the parent should fit the content exactly
  </div>
</div>

我希望上面的演示完全不显示蓝色。我该怎么做才能将 parent-flex 缩小到 child-flex 的当前大小？

Answer 1

我认为最好的解决方案是使用最大宽度，因为看起来您正在与 flexbox 布局模式作斗争。您可以在父级上设置最大内容宽度以阻止其增长，但我真的不明白为什么您可以删除背景色。

.parent-flex {
  width: max-content;
  background-color: blue;
}

.child-flex {
  max-width: 442px;
  background-color: yellow;
}

<div class="parent-flex">
  <div class="child-flex">
    text lots and lots of text that goes on for a little while and wraps, ideally there should be no visible blue since the parent should fit the content exactly
  </div>
</div>

在子级中使用 flex-basis 和长文本时，父级 flex 不会收缩

Parent flex doesn't shrink when using flex-basis and long text in child

html

css

flexbox