CSS Width auto and float left - Allow to overflow

Question

I've got a container div which has property width: auto;. This container has children elements which have property float: left;. The normal behaviour is to align all the elements continously until one element overflows the container div. In that case, that child element will be placed under the other children elements. I'm trying to force children elements to expand container div even if it overflows. I want all the children elements to be aligned.

How could I achieve this?

Answer 1

Since float elements do not increase parent's width you probably need to make them display: inline-block then you can add white-space: nowrap to the parent. display: inline-block is also useful if you need to use non-transparent background for the parent.

.container {
  background-color: yellow;
  white-space: nowrap;
  font-size: 0;
  margin: 5px 0;
}
.second.container {
  display: inline-block;
}
.container > div {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: firebrick;
  margin: 10px;
}

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