Question

我一直在寻找网络，但似乎无法找到解决方案。

以下是一个示例代码：

.container {
  display: flex;
}

.horizontally-scrolled-items {
  display: flex;
  background: lightblue;
  overflow-x: scroll;
}
.item {
  width: 1000px;
  border: 1px solid blue;
}

HTML：

<div class="container">
  <div class="horizontally-scrolled-items">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
  <div class="aside">
    <button>keep me on screen</button>
  </div>
</div>

想法是将水平滚动的项目变为flex：1。如果项目大于容器的宽度，则要滚动它们，在视图中放在一边。

Answer 1

您可以使用min-width实现此目的。向.item班级min-width提供flex-grow: 1;。然后将.horizontally-scrolled-items div设置为width: 100%;。

<强> CSS

.horizontally-scrolled-items {
  width: 100%;
}

.item {
  min-width: 400px;
  flex-grow: 1;
}

CodePen

Answer 2

另一种方法是使用flex: 0 0 auto设置项目，这是flex-grow: 0; flex-shrink: 0的简写，因此flexbox不会尝试调整项目的大小。

Answer 3

带有Flex框

.horizontally-scrolled-items {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.item {
  flex: 0 0 auto;
}

没有Flex框

.horizontally-scrolled-items {
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
}
.item {
   display: inline-block;
}

水平滚动flex儿童

3 个答案: