title: How to adjust three divs using flex to occupy the exact width of screen?
body: <p>I have three divs side-by-side. The left one should occupy 25% of the screen. The middle one should occupy a fixed size, let's say 50 pixels (that may change). The third one should occupy the remaining space, but not exceed the size of the screen. When I load a big image on it, it exceeds the screen. I have tried <code>flex: 1 1 auto;</code> and <code>flex-shrink: 1;</code> but both are useless. I want the scrollbar to appear on the <code>d3</code> div, not on <code>body</code>.</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>body {
    display: flex;
    margin: 0;
    width: 100%;
  }
  #d1 {
    background-color: red;
    flex: 1 0 auto;
    width: 25%;
  }
  #d2 {
    background-color: green;
  }
  #d3 {
    background-color: blue;
    flex-shrink: 1;
  }
  #d3a {
    background-color: cyan;
    margin: 1em;
    width: 1000px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='d1'&gt;
  1
  &lt;/div&gt;
  &lt;div id='d2'&gt;
  2
  &lt;/div&gt;
  &lt;div id='d3'&gt;
    &lt;div id='d3a'&gt;
    3a
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>