html - 如果孩子的总宽度大于其宽度，则为 div 启用水平滚动

Question

我正在尝试将所有这些块放在它们的容器中的一行中。

手头的问题是容器的固定宽度为300px.

每个较小item的 s 的宽度为100px

我想要发生的事情是让所有这些items都在一行上，并且由于它们的总和width大于父宽度，我希望父级带有滚动条，但它们都必须保持在overflow宽度内。x300px

.container {
  position: relative; 
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: scroll;
  border: 1px solid black;
}

.item {  
  display: inline-block;
  height: 50px;
  width: 100px;
  border:1px solid red;
  background-color: lightblue;
}

<div class="container">
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
</div>

标签： htmlcss

Answer 1

您可以使用 css flexbox 轻松完成此操作。

#boxes {
  display: flex;
  width: 300px;
  overflow-x: scroll;
}

.box {
  flex: 1;
  min-width: 100px;
  min-height: 100px;
  display: inline-block;
  border: 1px solid #010101;
  background: #c8c8c8;
  margin-right: 10px;
}

<div id="boxes">
  <div class="box">Hi I'm box 1</div>
  <div class="box">Hi I'm box 2</div>
  <div class="box">Hi I'm box 3</div>
  <div class="box">Hi I'm box 4</div>
  <div class="box">Hi I'm box 5</div>
  <div class="box">Hi I'm box 6</div>
</div>