javascript - 使水平滚动父级占用其子级的宽度

Question

我正在尝试使用 flex 制作水平滚动条。问题是 flex 元素的父项没有占用所有子项的完整宽度。

问题是 children 正在使用 flex: 0 0 9% 并且没有为任何 parent 定义固定宽度，因为我想让它灵活。所以，我在 codepen 中制作了一个简单的结构来展示我正在尝试做的事情。

https://codepen.io/khubaibqaiser/pen/WVGZZW

for (var i = 0; i < 100; i++) {
  $("#itemContainer1, #itemContainer2, #itemContainer3").append(`<div class="item">Child ${i}</div>`)
}

.parent {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: red;
  overflow: auto;
}

.row {
  display: flex;
  flex: 0 0 auto;
  background: yellow;
  margin: 10px 0;
}

.item {
  flex: 0 0 9%;
  background: green;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div id="itemContainer1" class="row">
  </div>
  <div id="itemContainer2" class="row">
  </div>
  <div id="itemContainer3" class="row">
  </div>
</div>

理想情况下，.row div 的宽度应占据其所有子元素的宽度。

Answer 1

水平滚动在那里，可能是因为你的父背景颜色，将颜色更改为蓝色，然后你就完成了。