水平滚动不会触发答案

【问题标题】：Horizontal scroll won't trigger水平滚动不会触发
【发布时间】：2022-01-11 10:31:48
【问题描述】：

在 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>

【问题讨论】：

标签： html css flexbox

【解决方案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 demo

【讨论】：