CSS溢出和空格不起作用

Question

Current Situation

Using the following code I show a couple of divs floated to the left.

 * { 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; } 

 <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> 

Current result:

Problem

What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?

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

Answer 1

A fix I found was to change the .column from being a float: left to display: inline-block . This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.

Edited Fiddle: https://jsfiddle.net/9bo4f5pv/

Answer 2

Use display: flex on the parent, then flex: 0 0 150px on the columns.

 * { 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; } 

 <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>