水平滚动不会触发

Question

在YouTube视频之后，我逐字逐句地遵循这个代码。这个问题的奇怪之处在于，当YouTube视频上的人使用这段代码时，他的代码创建了必要的功能，使网格项能够向右滚动。当我试图运行完全相同的代码库时，我的网格项只是静态的，没有侧滚动选项。

如果有人能帮我了解原因的话，那就太棒了。

​

.wrapper {
  max-height: 120px;
  border: 1px solid #ddd;
  display: flex;
  overflow-x: auto;
}

.wrapper::-webkit-scrollbar {
  width: 0px;
}

.wrapper .item {
  min-width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background-color: #ddd;
  margin-right: 2px;
}

<div class="wrapper">
  <div class="item">box-1</div>
  <div class="item">box-2</div>
  <div class="item">box-3</div>
  <div class="item">box-4</div>
  <div class="item">box-5</div>
  <div class="item">box-6</div>
</div>

​

Answer 1

删除前缀规则后，滚动条将生成。

这似乎是你唯一需要做的调整(其他我做的都是可选的)。

​

.wrapper {
  display: flex;
  overflow-x: auto;
}

.wrapper .item {
  flex: 0 0 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background-color: #ddd;
  margin-right: 2px;
}

<div class="wrapper">
  <div class="item">box-1</div>
  <div class="item">box-2</div>
  <div class="item">box-3</div>
  <div class="item">box-4</div>
  <div class="item">box-5</div>
  <div class="item">box-6</div>
</div>

​

jsFiddle演示