全宽div内可水平滚动的div [重复]答案

【问题标题】：Horizontally scrollable div inside full width div [duplicate]全宽div内可水平滚动的div [重复]
【发布时间】：2017-11-18 14:03:54
【问题描述】：

我有一个水平适合屏幕的分区，其中我有 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>

【问题讨论】：

标签： html css horizontal-scrolling

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

【讨论】：

【解决方案2】：

我不确定我是否误解了你，但我认为你想要做的是让 H1 超过 5 div，如下所示：

https://jsfiddle.net/p78L2bka/

.outer {
  display: flex;
  overflow-x: scroll;
}

.middle {
  display: flex;
  width: 100%;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
}

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

【讨论】：