How to prohibit line breaks between div elements when the container width is shorter than the sum of the widths of the children


I have a container div element and some children div elements.


I want to horizontally list the children elements in a single line without line breaks. I read that I can use white-space:nowrap on the container element and/or display:inline or display:inline-block on the children. This works when the container's width is long enough.

However, I have a container whose width may become shorter than the sum of the widths of the children. The way mentioned above does not prohibit line breaks in such case. I still want to prohibit line breaks and force them to be on a single line, with the extra part of children being hidden if the container width is not enough. How can I do that?

Problem courtesy of: sawa


<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
   overflow: hidden;
   white-space: nowrap;

   display: inline-block;
   width: 200px;
   height: 200px;

Solution courtesy of: James Montagne


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.