html - 调整浏览器大小时的内联 block 滚动条

Question

这是我的CSS:

.contain
{
  min-width: 300px;
  background: black;
  height: 200px;
  display: inline-block;
  overflow: auto;
}
.inl1{
  /* margin: 5px 5px 5px 5px; */
  min-width: 300px;
  background: blue;
  width: 400px;
  height: 200px;
}

<div class=contain>
  <div class=inl1></div>
</div>

<div class=contain>
  <div class=inl1></div>
</div>

很明显，这两个 div 内联显示，这正是我想要的。

但是，当浏览器的尺寸调整得更小时，div 会一个一个地显示在另一个上方(期望的行为)，但是一旦我使浏览器窗口小于最小宽度，我就需要显示水平滚动条。这不会发生。

关于为什么的任何帮助？

已编辑:我尝试了此处的建议，但它们似乎都破坏了浏览器尺寸较小时 div 相互堆叠的预期行为。

我追求的效果:

在足够宽的浏览器中内联显示 div(没有滚动条)；但是在“窄”浏览器(即移动设备)中，一个一个地显示 div，然后在每个 div 不再显示最小宽度时添加水平滚动。

我觉得这样更清楚一些......

Answer 1

你只需要有一个 div 的包装器并设置它

.wrapper{
   min-width: 100%;
   white-space: nowrap;
}

这是 fiddle :https://jsfiddle.net/1hshzxah/3/