title: Layout: "2 columns into max-width+centered wrapper" with stretching option
body: <p>I'm trying to achieve a variation of a two columns layout, into a basic max-width + centered wrapper (on mobile the second column would stack under the first one).
  The trick is that on bigger screen I would like the second column to stretch all the way to the right side of the screen.</p>
  
  <p>I achieved it, using <em>flexbox</em> and <code>calc()</code> and it falls back to the regular layout if <code>calc()</code> is not supported: </p>
  
  <p>Sass :</p>
  
  <pre><code>$content-max-width: 500px;
  $horiz-padding: 50px;
  $minvw: $content-max-width + $horiz-padding * 2;
  /* decorations */
  body {  
    margin: 0;
    * { box-sizing: border-box; }
    .wrapper {
      &amp; &gt; * {
        border: solid 2px #666;
        min-height: 80vh;
      }
      .content {
        box-shadow: 0 3px 8px rgba(0, 0, 0, .25)
      }
      .main {
        min-height: 50vh;
        background-color: #bbffbb;
      }
      .expanded {
        background-color: #ffbbbb;
        &gt; * {
          background-color: #ffffbb;
          height: 100%;
        }
      }
    }
  }
  /* mobile first */
  .wrapper {  
    padding: 0 $horiz-padding;
    .content {
      max-width: $content-max-width;
      margin: 0 auto;
    }
  }
  /* large screen */
  @media (min-width: $minvw) {
    .wrapper {
      display: flex;
      padding-right: calc(0px);
      .content {
        flex-grow: 1;
        display: flex;
        max-width: calc(99999px);      
        margin: 0 0 0 calc( (100vw - #{$content-max-width} - #{$horiz-padding}*2) * .5);
      }
    }
    .main {
      flex-basis: $content-max-width * .5;
    }
    .expanded {
      flex-grow: 1;
      &gt; * {
        width: $content-max-width *.5;
      }
    }
  }
  </code></pre>
  
  <p>And HTML markup :</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="content"&gt;
      &lt;div class="main"&gt;main...&lt;/div&gt;
      &lt;div class="expanded"&gt;
        &lt;div&gt;expanded...&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In action : <a href="https://jsfiddle.net/leonsaysHi/uu6gg7uj/" rel="nofollow noreferrer">https://jsfiddle.net/leonsaysHi/uu6gg7uj/</a></p>
  
  <p>I was wondering if there is any solution to achieve this without relying on <code>calc()</code> as it is not yet widely supported.</p>
  
  <p>Thanks a lot.</p>
  
  <p><strong>Edit:</strong> you can change the value of $content-max-width to see what I mean.</p>
  
  <p><strong>2nd edit:</strong> here is an image showing what I am trying to achieve :
  <a href="https://i.stack.imgur.com/VgPLm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VgPLm.png" alt="enter image description here"></a></p>