Flexbox 行：不根据内容增长？ [复制]

Posted 2023-03-06

【中文标题】Flexbox 行：不根据内容增长？ [复制]

【英文标题】：Flexbox row: doesn't grow according to content? [duplicate]

【发布时间】：2019-01-30 03:21:12

【问题描述】：

我有以下结构，我想了解为什么我的行不随其内部内容增长。

.row 
  border:solid red;
  display: flex;
  flex-direction: row;



.cell 
  border: solid green;
  flex: 0 0 400px;

<div class="row">
  <div class="cell">
   cell 1
  </div>
  <div class="cell">
   cell 2
  </div>
  <div class="cell">
   cell 3
  </div>
</div>

JsFiddle

我不希望单元格增长或缩小，它们应该始终为 400 像素宽度。父级应该增长并溢出窗口，并且需要一个水平滚动条。

在上面的例子中，红色边框应该在绿色边框周围。绿色边框具有预期尺寸，而不是红色边框。

出于与我的用例相关的可维护性原因，我不想为我的行设置静态宽度。

我对非 flexbox 解决方案持开放态度（请参阅 inline-block attempt），但更希望使用 flexbox 解决方案（因为我需要 align-items: center 行为）

【问题讨论】：

试试这个：***.com/questions/33891709/…

@DanielBernardi 我觉得这无关，我没有列而不是 flexwrap 行为。请问为什么要链接到这个答案？

flex: 0 0 400px 你已经明确告诉它不要增长或收缩，并且是 400px 宽。为什么要使用 flexbox？

你读过this的问题吗？还是这个one？您可以使用display: inline-flex 而不是仅使用flex，然后将width: 400px 用于.cell，删除flex: 0 0 400px 以实现您所需要的。

@pazitos10 实际上这就是我要找的东西，也许你可以发布一个答案？ jsfiddle.net/slorber/v6xp917z/25

【参考方案1】：

如果您希望您的容器始终与其子容器的宽度相匹配，您需要查看display: inline-flex。

display: flex 的行为更像是一个宽度为 100% 的容器

这是一个应该工作的小提琴： http://jsfiddle.net/hnrs64fm/

【讨论】：

解决方案并不是真正的inline-flex，因为您还必须从flex-basis 切换到width 才能使布局生效。这个问题实际上是一个浏览器错误。

感谢@Michael_B，您提供的链接有助于解决这个简单的 js fiddle。不幸的是，我的全局布局仍然存在问题，这是一个相关的问题：***.com/questions/52000363/…