5

我正在尝试将 flex 布局与两个 flex 项一起使用：

  • Flex item 1 在运行时填充动态内容（应该与其内部内容一样大）
  • Flex item 2 应该占用剩余空间

Firefox（和 Chrome）不知何故忽略了子元素的内部宽度，这导致元素重叠（IE 按预期工作）（小提琴）：

<div style="display: flex;">
    <!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes -->
    <div style="min-width: auto">
        <div style="width: 200px; background-color: green;">Dynamic Content</div>
    </div>
    <div style="flex-grow: 1; border: 1px solid #888;">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>

200px 的宽度只是一个例子，我不知道运行时的确切宽度。

在开发者 Mozilla我还发现

为确保弹性项目的合理默认最小尺寸，请使用 min-width:auto 和/或 min-height:auto。对于 flex 项目，auto 属性值计算项目的最小宽度/高度不小于其内容的宽度/高度，保证项目渲染得足够大以容纳内容。有关详细信息，请参阅最小宽度和最小高度。

我尝试了不同的值，但结果是一样的。

这是设计使然还是如何防止css flex框变得小于其内容？

编辑：现在看来，这已在 Firefox / Chrome 中正确实现。

4

2 回答 2

0

只需忽略 flex 并使用它：

<div style="width:100%;">
<!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes -->
<div style="min-width: auto">
    <div style="width: 200px; background-color: green;">Dynamic Content</div>
</div>
<div style="flex-grow: 1; border: 1px solid #888;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

当您将宽度设置为 100% 时，下一项将位于第一项之下。由于我们使用另一个 div 来存储内部内容，因此它们将占用必要的空间...

于 2014-01-03T05:13:53.473 回答
0

如果这两列都很重要，您可以使用它max-width来增加/减少宽度。

工作演示

代码

<div style="display: flex; width:100%;">
    <div style="max-width: 50%">
        <div style="background-color: green;">Dynamic Content</div>
    </div>
    <div style="border: 1px solid #888; max-width: 50%;">
        Lorem ipsum dolor sit amet
    </div>
</div>
于 2014-01-03T07:30:19.027 回答