title: How to prohibit line breaks between div elements when the container width is shorter than the sum of the widths of the children
body: <p>I have a container div element and some children div elements.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;foo&lt;/div&gt;
    &lt;div&gt;bar&lt;/div&gt;
    &lt;div&gt;baz&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>I want to horizontally list the children elements in a single line without line breaks. I read that I can use <code>white-space:nowrap</code> on the container element and/or <code>display:inline</code> or <code>display:inline-block</code> on the children. This works when the container's width is long enough.</p>
  
  <p>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 <code>hidden</code> if the container width is not enough. How can I do that?</p>