Prevent divs from wrapping when parent is too small

Question

How can I stop the divs inside of this parent div from wrapping instead of just being cut off?

Code:

Answer 1

Instead of float consider inline-block and you will be able to use the with-space trick:

var slider = document.getElementById("slider"),
  cont1 = document.getElementById("container1"),
  cont2 = document.getElementById("container2");

slider.addEventListener("input", function() {
  cont1.style.width = slider.value + "px";
  cont2.style.width = slider.value + "px";
}, false);

#item {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.container {
  height: 100px;
  background-color: #ccc;
  white-space: nowrap;
  font-size: 0; /*to avoid white-space between inline-block*/
}

use slider to change width of the container

overflow: hidden

  

  



overflow: visible