显示: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在没有成功不同的组合值.

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>

Answer 2

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

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

.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;
}

Answer 3

2023 年更新

这似乎在最近的浏览器版本中已得到修复，因为右侧填充在这里清晰可见：

.outer{width:500px; display:flex; padding:20px; overflow:auto; background:#ccc;}
.inner{width:600px; height:50px; flex-shrink:0; background:darkblue;}

<div class="outer">
  <div class="inner"></div>
</div>

但在将溢出应用于包装元素的情况下，问题仍然存在（另请注意，当滚动到右侧时，灰色背景不会扩展以填充包装）：

.wrapper{width:500px; overflow:auto; border:1px solid red;}
.outer{display:flex; padding:20px; background:#ccc;}
.inner{width:600px; height:50px; flex-shrink:0; background:darkblue;}

<div class="wrapper">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

但这可以通过添加width:fit-content到outer元素来解决：

.wrapper{width:500px; overflow:auto; border:1px solid red;}
.outer{width:fit-content; display:flex; padding:20px; background:#ccc;}
.inner{width:600px; height:50px; flex-shrink:0; background:darkblue;}

<div class="wrapper">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>