css - 为什么证明内容 : flex-end remove scrollability from a container with overflow-x: auto?

<分区>

我需要创建一个水平滚动的容器类，以便在非常大的应用程序中通用。

我想到了这个:

.horizontal-scroller {
  background-color: #ccc;
  display: flex;
  overflow-x: auto;
  width: 100%;
}

button { 
  white-space: nowrap;
}

button::before {
  content: 'A button with a label';
}

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container</p>

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container with no overflow</p>

现在对于第二种情况(没有溢出)我需要容器将元素右对齐，这就是我添加的原因

justify-content: flex-end;

.horizontal-scroller {
  background-color: #ccc;
  display: flex;
  justify-content: flex-end;
  overflow-x: auto;
  width: 100%;
}

button { 
  white-space: nowrap;
}

button::before {
  content: 'A button with a label';
}

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container</p>

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container with no overflow</p>

不幸的是，这会消除溢出容器的可滚动性。

问题:为什么会发生这种情况，我该如何通过尽可能少的更改解决这个问题？

我需要坚持使用 display: flex;。

最佳答案

在第一个 child 上添加 margin-left: auto 可能会有所帮助。它会在内容未溢出时右对齐内容，而不会破坏滚动条功能。

.horizontal-scroller {
  background-color: #ccc;
  display: flex;
  overflow-x: auto;
  width: 100%;
}

button { 
  white-space: nowrap;
}

button::before {
  content: 'A button with a label';
}
.horizontal-scroller button:nth-of-type(1) {
  margin-left: auto;
}

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container</p>

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container with no overflow</p>

关于css - 为什么证明内容 : flex-end remove scrollability from a container with overflow-x: auto?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57142975/

上一篇：css - 移动段落内的 float 区域

下一篇：css - 通过 css 强制容器高度(使用 Avada 和 Wordpress)

相关文章：

html - 使内联导航元素列表达到容器的整个高度

html - 如何将 flexbox 中的 DIV 固定在第一行？

css - Flexbox 元素扩展父项中的 Flexbox 元素

php - wordpress divi 3.0 主题上的居中内联 Logo 选项问题

image - Flexbox - 图像相同高度

javascript - 检查数据属性和应用逻辑失败

jQuery UI 可排序动画

CSS 网格导航栏 - 如何正确添加按钮分隔符？

jquery - 将 Facebook 连接按钮更改为我自己的图像

python - 反转 CSS 中的颜色值