弹性项使用 flex-basis 后溢出了

Question

我想使用 `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>

有没有解决方案或变通方法？

- Daniel

---

这是在嵌套的 flex 容器中发生的已知 bug。请参见重复问题中排名第一的“浏览器错误”部分。 - Michael Benjamin

@Michael_B 我添加了一个更多的重复项。这是你所指的同样问题吗？ - Asons

@LGSon，这是一个有用的答案（就像@Oriol的所有帖子一样）。但最终，问题只是一个 bug，因此不需要进行长时间的技术说明并引用大量规格。 - Michael Benjamin

Answer 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>

- Huangism