title: Is it possible to set proportional grid columns based on content?
body: <p>Using either Flexbox or CSS Grid, is it possible to size my columns based on the contents of one of the columns?</p>
  
  <h1>Here’s What I Want:</h1>
  
  <p>I have 2 columns, a <strong>main</strong> and a <strong>side</strong>.</p>
  
  <pre><code>|------------------------container--------------------------|
  |                                                           |
  ||----------------------------------------|----------------||
  ||               main                     |      side      ||
  ||----------------------------------------|----------------||
  |                                                           |
  |-----------------------------------------------------------|
  </code></pre>
  
  <p>I want the <strong>side</strong> to be automatically sized based on its content, and I want the <strong>main</strong> to be twice as wide as the <strong>side</strong>, at a minimum. It can grow bigger, but no smaller.</p>
  
  <p>As the container increases, the <strong>main</strong> will grow at the same rate, while the <strong>side</strong> remains its auto width.</p>
  
  <pre><code>|--------------------------container increases----------------------|
  |                                                                   |
  ||------------------------------------------------|----------------||
  ||                   main increases               |      side      ||
  ||------------------------------------------------|----------------||
  |                                                                   |
  |-------------------------------------------------------------------|
  </code></pre>
  
  <p>The container can shrink down to 3 times as big as the <strong>side</strong>, at which point the <strong>main</strong> will be twice as wide as the <strong>side</strong>. I want this to be the breakpoint.</p>
  
  <pre><code>|--------------------container----------------------|
  |                                                   |
  ||--------------------------------|----------------||
  ||               main             |      side      ||
  ||--------------------------------|----------------||
  |                                                   |
  |---------------------------------------------------|
  </code></pre>
  
  <p>If the container shrinks any more, I want the columns to stack, where both columns are now 100% width:</p>
  
  <pre><code>|--------------------container--------------------|
  |                                                 |
  ||-----------------------------------------------||
  ||               main                            ||
  ||-----------------------------------------------||
  ||-----------------------------------------------||
  ||                           side                ||
  ||-----------------------------------------------||
  |                                                 |
  |-------------------------------------------------|
  </code></pre>
  
  <h1>Here’s What I’ve Tried:</h1>
  
  <p>I tried doing this with Flexbox and with Grid, but I couldn’t get the main column to determine its size based on the side column.</p>
  
  <pre><code>.container-grid {
    display: grid;
    grid-template-columns: 1fr auto; /* works, but doesn’t wrap when left column gets too small */
    /* I also tried the repeat() syntax, but that only worked for similarly-sized columns */
  }
  </code></pre>
  
  
  
  <pre><code>.container-flex {
    display: flex;
    flex-wrap: wrap;
  }
  .main { flex: 2; } .side { flex: 1; } /* same problem, doesn’t wrap */
  .main ( flex: 0 1 auto; } .side { flex: 0 0 auto; } /* wraps columns too early, any time main is smaller than intrinsic width */
  </code></pre>
  
  <p>The only solution I’ve tried that works is knowing the fixed width of the side column (which I would have to predict without knowing its content), and then using a media query at 3 times its width. And of course, the media query only works on window width, not container width, so I would have to calculate the media query using any parent elements of the container.</p>
  
  <pre><code>.container-grid {
    display: grid;
    grid-template-columns: 1fr 15em;
  }
  @media screen and (max-width: 45em) {
    .container-grid {
      grid-template-columns: 1fr;
    }
  }
  </code></pre>