title: Flex-box sizing to children
body: <p>I have an angular webpage using Angular Material and Flex-box. This page will have a graph that retains its ratio and therefore has a max-width set to prevent it from taking up too much vertical space. I want to set the parent div of the graph to only take up as much horizontal space as the child element. I will fill the rest of the horizontal space with a div that has fxLayout column and will stretch vertically.</p>
  
  <p>Currently</p>
  
  <pre><code>&lt;div fxLayout="row"&gt;
      &lt;div fxLayout="column" fxFlex&gt;
          &lt;app-graph&gt;&lt;/app-graph&gt; //max-width: 1300px
          &lt;app-results&gt;&lt;/app-results&gt;
      &lt;/div&gt;
      &lt;div fxLayout="column" fxFlex="30" style="background-color: red;"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I am getting closer. I found setting the fxFlex="0 1 1300px" gives me the behavior I want of the first div. I can't figure out what to do for the 2nd div so that it continues to fill the remaining space.</p>
  
  <pre><code>&lt;div fxLayout="row"&gt;
      &lt;div fxLayout="column" fxFlex="0 1 1300px"&gt;
          &lt;app-graph&gt;&lt;/app-graph&gt;
          &lt;app-results&gt;&lt;/app-results&gt;
      &lt;/div&gt;
      &lt;div fxLayout="column" fxFlex="20" style="background-color: red;"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>