CSS溢出和空白空间无法正常工作

Question

现状

使用以下代码，我会向左侧显示几个div。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  height: 80px;
  position: fixed;
  width: 100%;
  background: green;
}

.inner-container {
  position: absolute;
  top: 80px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  white-space: nowrap;
}

.column {
  height: 500px;
  width: 150px;
  background: red;
  float: left;
  margin: 5px;
}

＆＃13;

<div class="container">
  <div class="header">
  </div>

  <div class="inner-container">
    <div class="column">
    </div>
    <div class="column">
    </div>
    <div class="column">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

目前的结果：

问题

我想要的是红色的盒子不会在其容器内包裹。如果空间不够，我想要两个，一个垂直和水平滚动条。对于垂直滚动条，它可以工作。我错过了什么？

JSFiddle：https://jsfiddle.net/brainchest/j6zh400v/

Answer 1

我发现的修正方法是将.column从float: left更改为display: inline-block。这会将每列视为“单词”（如文本中的单词），因此white-space: no-wrap;适用。否则，float: left会改变元素的定位方式。

编辑小提琴：https://jsfiddle.net/9bo4f5pv/

Answer 2

在父级上使用display: flex，在列上使用flex: 0 0 150px。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
}
.header {
  height: 80px;
  position: fixed;
  width: 100%;
  background: green;
}
.inner-container {
  position: absolute;
  top: 80px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  display: flex;
}
.column {
  height: 500px;
  flex: 0 0 150px;
  background: red;
  margin: 5px;
}

＆＃13;

<div class="container">
  <div class="header">
  </div>
  
  <div class="inner-container">
    <div class="column">
    </div>
    <div class="column">
    </div>
    <div class="column">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;