使用弹性基础时弹性项目溢出[重复]

Posted 2023-03-06

【中文标题】使用弹性基础时弹性项目溢出[重复]

【英文标题】：Flex item overflowing when using flex-basis [duplicate]

【发布时间】：2019-09-27 12:03:09

【问题描述】：

我想使用flex-basis 属性在元素之间创建间隔。这样做可以让我保持元素之间的空间，而不管“flex-direction”如何。

这在使用flex-direction: column 时效果很好，但是在使用flex-direction: row（默认值）时，行中的最后一项溢出并被裁剪。

完整的工作示例：https://codepen.io/anon/pen/NVxaoy

input 
  margin: 0;


.field 
  display: flex;


.field.stacked 
  flex-flow: column;


.label 
  display: flex;


.spacer.x1 
  background: green;
  flex: 0 0 8px;


.spacer.x2 
  background: red;
  flex: 0 0 16px;

<h1>Horizontal</h1>
<div class="field">
  <label class="label">
            <input type="checkbox">
            <div class="spacer x1"></div>
            <div class="text">Apple</div>
        </label>
  <div class="spacer x2"></div>
  <label class="label">
            <input type="checkbox" />
            <div class="spacer x1"></div>
            <div class="text">Banana</div>
        </label>
  <div class="spacer x2"></div>
  <label class="label">
            <input type="checkbox" />
            <div class="spacer x1"></div>
            <div class="text">Orange</div>
        </label>
</div>
<h1>Stacked</h1>
<div class="field stacked">
  <label class="label">
            <input type="checkbox">
            <div class="spacer x1"></div>
            <div class="text">Apple</div>
        </label>
  <div class="spacer x2"></div>
  <label class="label">
            <input type="checkbox" />
            <div class="spacer x1"></div>
            <div class="text">Banana</div>
        </label>
  <div class="spacer x2"></div>
  <label class="label">
            <input type="checkbox" />
            <div class="spacer x1"></div>
            <div class="text">Orange</div>
        </label>
</div>

是否有解决方案或解决方法？

【问题讨论】：

这是嵌套弹性容器中发生的已知错误。请参阅副本顶部答案中的“浏览器错误”部分。

@Michael_B 我又添加了一个副本。你说的是同一个问题吗？

@LGSon，这是一个有用的答案（就像@Oriol 的所有帖子一样）。但归根结底，问题只是一个错误，因此不需要包含大量规范参考的冗长技术解释。

【参考方案1】：

老实说，我不确定为什么会发生这种裁剪，但您可以通过将垫片更改为使用 width 而不是 flex 来解决它

input  margin: 0 

.field 
  display: flex;


.field.stacked 
  flex-flow: column;


.label 
  display: flex;


.spacer.x1 
  background: green;
  width: 8px;

.spacer.x2 
  background: red;
  flex: 0 0 16px;

<h1>Horizontal</h1>
<div class="field">
  <label class="label">
    <input type="checkbox">
    <div class="spacer x1"></div>
    <div class="text">Apple</div>
  </label>
  <div class="spacer x2"></div>
  <label class="label">
    <input type="checkbox" />
    <div class="spacer x1"></div>
    <div class="text">Banana</div>
  </label>
  <div class="spacer x2"></div>
  <label class="label">
    <input type="checkbox" />
    <div class="spacer x1"></div>
    <div class="text">Orange</div>
  </label>
</div>

<h1>Stacked</h1>
<div class="field stacked">
  <label class="label">
    <input type="checkbox">
    <div class="spacer x1"></div>
    <div class="text">Apple</div>
  </label>
  <div class="spacer x2"></div>
  <label class="label">
    <input type="checkbox" />
    <div class="spacer x1"></div>
    <div class="text">Banana</div>
  </label>
  <div class="spacer x2"></div>
  <label class="label">
    <input type="checkbox" />
    <div class="spacer x1"></div>
    <div class="text">Orange</div>
  </label>
</div>