显示：Flex 溢出时失去正确的填充？

Question

我对 CSS3 flexbox 有疑问。

如果我将 flexbox 元素设置为 overflow 并为子项设置 min-width 值，父项上的正确填充丢失了吗？这在所有支持的浏览器上都是一致的。

这是错误的示例。如果您滚动到容器的右侧，您将看到最后一个子项紧贴容器的右边缘，而不是遵循填充值。

 .outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}

 <div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
</div>

有谁知道这是为什么以及我将如何纠正它？我搞砸了 padding 和 margin 不同组合的值但没有成功。

原文由 Chris Spittles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你需要添加另一层包装，如果你想在末尾同时使用“overflow-x:auto”和可滚动填充。

是这样的：

 .scroll {
    overflow-x: auto;
    width: 300px;
    border:1px #ccc solid;
}
.outer {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    min-width: 100%;
    height: 80px;
    padding: 5px;
    float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}

 <div class="scroll">
  <div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
  </div>
</div>

原文由 dholbert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

或者，可以使用伪元素创建边距：

 .outer::before { content: ''; min-width: 5px; }
.outer::after { content: ''; min-width: 5px; }

 .outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
}
.outer::after { content: ''; min-width: 5px; }
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}

 <div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
</div>

原文由 Artur K. 发布，翻译遵循 CC BY-SA 4.0 许可协议