<div class="grid">
  <div class="one">
    <h1>max-content</h1>
  </div>
  <div class="two">
    A track sized as max-content will try to become as big as possible, which may lead to overflow situations.
  </div>
  <div class="three">
    
    Remember that any change to the size of a row or column happens right across the track! 
  </div>
  
</div>

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 1.4em Kameron, sans-serif;
  display: flex;
  justify-content: center;
}

h1 {
  font: 2.8em Sansita, sans-serif;
  margin: 0;
}

.grid {
  width: 660px;
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-gap: 10px;
  grid-auto-rows: minmax(200px, auto);
  overflow: scroll;
}

.grid > * {
  padding: 20px;
  border: 5px solid rgb(198,164,154);
  background-color: rgba(198,164,154,.2);
  border-radius: 5px;
}

.three {
  grid-column: 1 / 3;
}