title: inline-block overflowing outside container
body: <p>I have a container that I don't want to set as inline-block and that contains inline-block elements.
  These elements will overflow out of the container instead of extending it.
  How can I manage to prevent this behaviour ?</p>
  
  <p><a href="http://codepen.io/anon/pen/EKZaPY" rel="nofollow noreferrer">Demo</a></p>
  
  <pre><code>#inline-block-container {
  background-color: red;
  white-space:nowrap;
  }
  
  .inline-block-element {
  background-color: blue;
  width: 50px;
  height: 30px;
  margin: 10px;
  display:inline-block;
  }
  </code></pre>
  
  <p>In this demo, I would like the red rectangle to expand (even out of viewport) to contain (visually) all the blue rectangles.</p>
  
  <p>-Edit-</p>
  
  <p>On my real page :
  <a href="https://i.stack.imgur.com/8eqXk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8eqXk.png" alt="Display"></a></p>
  
  <p>You can see the background (gradient light gray) stopping at the right border of the window (before scrolling to the right).
  There is also a bootstrap tooltip (in black) that is wrongly positionned and same for a context menu.
  The container, the body and the html tag won't extand outside of the initial view because the inline-block elements overflow outside of their container.</p>
  
  <p>I can't set the size in css because the content of the elements (dimgray) can change.</p>
  
  <p>I tried to set the container as display:table : same result.
  I tried position:absolute : it brakes things and doesn't solve the issue.
  I tried inline-flex : same result.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Best regards,</p>