当它也是一个弹性容器时，如何防止最后一个弹性项目填充剩余宽度[重复]

Posted 2023-03-07

【中文标题】当它也是一个弹性容器时，如何防止最后一个弹性项目填充剩余宽度[重复]

【英文标题】：How to prevent last flex item from filling remaining width when it is also a flex container [duplicate]

【发布时间】：2020-04-24 02:42:09

【问题描述】：

我有一个包含两个弹性项目的容器。最后一个弹性项目也是一个弹性容器，它允许它的弹性项目包装。我的目标是让最后一个 flex 项只占用所需的空间，这样当它的子项包裹时，两个主要的 flex 项可以在主 flex 容器中居中。

换句话说，我希望红色 div 尽可能宽，以便蓝色和红色 div 可以在绿色 div 中居中。无论我申请什么课程，我似乎都无法让它发挥作用。

在这个例子中，我使用的是 Tailwind 类，但这仍然是一个通用的 CSS 问题。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/>
<div class="border-2 border-green-500 flex items-center justify-center" style="width:700px;">
  <div class="border-2 border-blue-500 mr-2">
    Left
  </div>
  <div class="border-2 border-red-500 flex flex-wrap">
    <span>Right side has much longer text that I would like to wrap.</span>
    <span>When it wraps why is the red parent still full width?</span>
  </div>
</div>

这是一个 JSFiddle：https://jsfiddle.net/flyingL123/26jxpqez/12/

【问题讨论】：

您没有在您的问题或 JS Fiddle 中显示任何相关的 CSS；请这样做，否则我们似乎不太可能重现您的问题。

你不能这样做

@TemaniAfif 是您引用的那些重复的内联元素吗？即使我尝试使用块级元素，也会出现同样的问题。

它不是真正的内联或块，而是 shrink-to-fit 元素。 Flex 项目是块级项目，但它们会收缩以适应（它们的宽度取决于它们的内容），如 inline-block、float、position:absolute 等，在所有这些情况下，你无法实现你想要的。

【参考方案1】：

将右侧div的flex-basisCSS属性设置为0。

Example

编辑：如果您希望 div 占用更多宽度，您可以将 0 替换为其他值，例如200px.

【讨论】：

这对我不起作用。红色 div 中的文本溢出到它之外并且居中关闭。

嗯。它似乎在 Firefox 和 Chrome 上都适用于我。看看我刚刚添加的示例链接。

看看你的例子，我不确定这是 OP 还是任何人真正想要的结果......（例如，将每个单词换行）

@TylerH OP 说他们希望红色 div “只占用所需的空间”。请参阅我的编辑以获取说明。

@Jack 我想他们希望 div 占用与最长跨度一样多的空间，每个跨度都在不同的行上（例如它目前的工作方式，除了红色 div 缩小到适合）。