title: How to force a block container to take always all the available width?
body: <p>Here is the HTML code I'm currently practising on. The CSS is not complete since I don't know how to do what I want to :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    margin: auto;
    width: 700px;
    border: solid blue 2px;
  }
  .container div {
    padding: 10px 0;
    vertical-align: top;
  }
  #orange {
    background-color: coral;
  }
  #blue {
    background-color: lightblue;
  }
  .container &gt; div .content {
    border: dotted black 1px;
    height: 100px;
    width: 250px;
    margin: auto;
    display: block;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div id="orange"&gt;
      &lt;div class="content"&gt;content
        &lt;br /&gt;width: 250px&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="blue"&gt;
      &lt;div class="content"&gt;content
        &lt;br /&gt;width: 250px&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the container is large enough, the orange and blue blocks should stand side by side, like this :</p>
  
  <p><a href="https://i.stack.imgur.com/Wi3Ua.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wi3Ua.jpg" alt="enter image description here"></a></p>
  
  <p>If I reduce the width of the container, the horizontal margin inside the orange and blue blocks will shrink until their border meet the content's border :</p>
  
  <p><a href="https://i.stack.imgur.com/6MxGY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6MxGY.jpg" alt="enter image description here"></a></p>
  
  <p>Here is what I want to obtain when I reduce a bit more the container width :</p>
  
  <p><a href="https://i.stack.imgur.com/tU31F.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tU31F.jpg" alt="enter image description here"></a></p>
  
  <p>Does anyone know how to do this ?
  If possible, without JS. And the container does not depend on the screen size, so I can't use media queries based on the device width.
  And, of course, the solution must be compatible with as many web browsers as possible (including the latest versions of IE).</p>
  
  <p><strong>Edit:</strong>
  I've considered using <code>flexbox</code> but I was hoping I could find a solution without.
  By the way, I would be interested by a way to write, in the CSS code, specific rules which apply only on IE9 and below.</p>
  
  <p><strong>Edit2:</strong>
  It seems it is not possible to do what I want with the following constraints :</p>
  
  <ul>
  <li>no JS</li>
  <li>no condition on the screen size, but on the container size instead</li>
  </ul>
  
  <p>So I guess I will have to drop at least one of these...</p>