全宽div内的水平可滚动div

Question

我有一个水平适合屏幕的分区,我有5个分区,我想在屏幕上显示4个分区,当我水平滚动分区时会出现1个分区.我希望滚动条只显示在div中,而不是在浏览器窗口中.

下面是我的非工作代码,它将h1标记放在左边,我想要它在左上角然后在它下面所有5个div

.outer {
  overflow-x: scroll;
  width: 100%;
}

.inner {
  width: 25%;
  float: left;
}

<div class="outer">
  <h1>Header Title</h1>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
</div>

Answer 1

您可以使用Flexbox执行此操作:

.outer {
  display: flex; /* displays flex-items (children) inline */
  overflow-x: auto;
}

.inner {
  flex: 0 0 25%; /* doesn't grow nor shrink, initial width set to 25% of the parent's */
  height: 1em; /* just for demo */
}

<div class="outer">
  <div class="inner" style="background: red"></div>
  <div class="inner" style="background: green"></div>
  <div class="inner" style="background: blue"></div>
  <div class="inner" style="background: yellow"></div>
  <div class="inner" style="background: orange"></div>
</div>

h1元素的解决方案:

.outer {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.middle {
  display: flex;
  flex: 1;
}

.inner {
  flex: 0 0 25%;
  height: 1em;
}

<div class="outer">
  <h1>Header Title</h1>
  <div class="middle">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
</div>