<article>1. The fr unit fills up the available space BUT it is NEVER smaller than the minimum size of the grid container</article>
<div class="grid grid__one">
  <aside>Sidebar</aside>
  <main>Main</main>
</div>



<article>2. The fr unit fills up the available space BUT it is NEVER smaller than the content of the row or column</article>
<div class="grid">
  <aside>Sidebar</aside>
  <main>
    <img src="http://image.prntscr.com/image/f2b0ac9e43334eddac9c1af05e573888.png"/></main>
</div>




<article>3. In the case of a conflict, the fr unit is NEVER smaller than than the maximum of the container’s minimum width or the row/column content size.</article>
<div class="grid grid__three">
  <aside>Sidebar</aside>
  <main>
    <img src="http://image.prntscr.com/image/f2b0ac9e43334eddac9c1af05e573888.png"/></main>
</div>
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 50vh;
  margin: 50px 0 50px 0;
  color: #fff;
  text-align: center;
}

.grid__one {
  min-width: 400px; /*the main content section will never be less than the value here. resize page to see*/
}


main {
  background: rgba(44,62,80 ,1);
}

aside {
  background: rgba(192,57,43 ,1);
}

.grid__three {
  min-width: 400px;
}

.grid__three img {
  width: 600px;
}

/*
  =====cosmetics========
*/
body {
  font-family: 'Roboto', sans-serif;
  margin: 0 100px;
}

.grid {
  box-shadow: 5px 55px 50px -20px #b6b6b6;
}

article {
  width: 70%;
  margin: 0 auto;
  font-size: 1.1em;
  text-align: justify;
  color: rgba(0,0,0,0.6);
  margin-top: 50px;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

This Pen doesn't use any external JavaScript resources.