title: Shrinking inner html elements with CSS
body: <p>is it possible to shrink and grow child HTML elements with just CSS. Here is an example below, I want to see how others would approach this. I have seen solutions with JQuery however wanted to know there is an easier way to do this.</p>
  
  <pre><code>&lt;div class="your_custom_styling_here_for_resizing"&gt;
      &lt;div style="width: 400px; height: 400px; display: flex;"&gt;
        &lt;div style="height: 100px; background: #333333; flex: 1;"&gt;&lt;/div&gt;
        &lt;div style="background: #cccccc; flex: 1;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>