如何防止css flex项目变得比其内容小？

Question

我正在尝试使用两个flex项目的flex布局:

• Flex项目1在运行时填充动态内容(应该与其内部内容一样大)
• Flex项目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.对于弹性项目,auto属性值计算项目的最小宽度/高度不小于其内容的宽度/高度,从而保证项目的大小足以容纳内容.有关更多详细信息,请参阅最小宽度和最小高度.

我尝试了不同的值,但结果是一样的.

这是设计还是如何防止css flex box变得比它们的内容小？

编辑:这似乎现在在Firefox/Chrome中正确实现.

Answer 1

只需忽略 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 来存储内部内容，因此它们将占用必要的空间......