<h1>Let's talk about rates of size changes</h1>

<p>Resize this viewport slowly and observe how the amount of space each block of content takes up changes differently. I suggest using a Codepen layout that utilises the full width of the viewport, for a better illustration.</p>

<section>
  <h2>Sizing in Flexbox</h2>
  <p>Reading Rachel Andrew's <a href="https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/">step-by-step explanation</a> of how the sizing algorithm works for Flexbox is <em>highly</em> recommended. Here you can see how when there is more content in the last column, Flexbox gives it more space and shrinks the second column “earlier” for the bottom example versus the top one.</p> 
  <div class="flex wrapper">
    <div class="box">Word</div>
    <div class="box">This is a sentence.</div>
    <div class="box">A rather short sentence.</div>
  </div>

  <div class="flex wrapper">
    <div class="box">Word</div>
    <div class="box">This is a sentence.</div>
    <div class="box">For the purposes of this example, we need a slightly longer run of text, a paragraph.</div>
  </div>
</section>

<section>
  <h2>Sizing in Grid</h2>
  <p>The first column is sized <code>1fr</code>, which means it takes up the amount of space required for the content plus any available free space. So it will keep growing if the viewport gets wider. As the viewport shrinks, however, its behaviour is determined by how the other columns are sized. In this example, the other 2 columns are <code>auto</code> and <code>fit-content(400px)</code>, which, as space is taken away, behave similarly because fit-content resolves to <code>minmax(auto, max-content)</code>, except that it's clamped at the provided argument value.</p>
  <div class="grid wrapper">
    <div class="box">Same content but different behaviour.</div>
    <div class="box">Same content but different behaviour.</div>
    <div class="box">Same content but different behaviour.</div>
  </div>
  
  <p>When it comes to <code>minmax()</code>, notice that the column holds its maximum size for as long as possible, while other columns shrink. The <code>fr</code> column shrinks first, followed by the <code>auto</code> column. But both the <code>auto</code> column and <code>minmax()</code> column reach their minimum size at the same time.</p> 
  <div class="grid2 wrapper">
    <div class="box">Same content but different behaviour.</div>
    <div class="box">Same content but different behaviour.</div>
    <div class="box">Same content but different behaviour.</div>
  </div>
</section>

<section>
  <h3>Useful resources</h3>
  <ul>
    <li><a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic & Extrinsic Sizing Module Level 3</a></li>
    <li><a href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm">CSS Flexible Box Layout: 9. Flex Layout Algorithm</a></li>
    <li><a href="https://www.w3.org/TR/css-grid-1/#layout-algorithm">CSS Grid Layout: 11. Grid Sizing</a></li>
    <li><a href="https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/">Flexbox: How Big Is That Flexible Box?</a></li>
    <li><a href="https://www.youtube.com/watch?v=lZ2JX_6SGNI">Min & Max Content Sizing in CSS Grid — 1/3 Flexibility</a></li>
    <li><a href="https://www.youtube.com/watch?v=ZPtpzuRajzM">FR Units in CSS Grid — 2/3 Flexibility</a></li>
    <li><a href="https://www.youtube.com/watch?v=mVQiNpqXov8">MinMax in CSS Grid — 3/3 Flexibility</a></li>
  </ul>
</section>