title: CSS Grid grid-auto-rows: 100% children overflow parent
body: <p>I have a grid system, embedded in the list items of an unordered list. The grid system is defined as below.  Element 3 spans 2 rows. Element 4 spans two columns</p>
  <pre><code>Grid List item 1:
  /----------/----------/----------/
  /    1     /    2     /          /
  /----------/----------/    3     /
  /         4           /          /
  /----------/----------/----------/
  Grid List item 2:
  /----------/----------/----------/
  /    1     /    2     /          /
  /----------/----------/    3     /
  /         4           /          /
  /----------/----------/----------/
  ...
  </code></pre>
  <p>The goal is that row 1 remains minimal size to its content, whereas row 2 extends, to fit the size of element 3.</p>
  <p>To achieve this behaviour, I added <code>grid-auto-rows: 100%;</code> to the grid container. The first row now has the minimal height needed for the title, and the second row will expand if element '3' is larger than the height of the content in elements 2+4</p>
  <p>But I noticed that this messes up the height of the parent grid. The children overflow their parent, which can be seen in the borders in the sample code below: The black borders overflow the parent container. See sample code below. It becomes worse as the title spans more lines.</p>
  <p><strong>Question:</strong> How can I have the parent (= grid container) expand to the height of its children, while keeping the behavior that the first row has a minimal height (as defined by the height required for the text in element 2)
  Note: I require this grid structure, such that the content can be easily reorganized for smaller viewports.</p>
  <p><strong>Sample code:</strong>
  <a href="https://jsfiddle.net/92n3xrpq/" rel="nofollow noreferrer">https://jsfiddle.net/92n3xrpq/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header{
      height:100px;
      background-color:grey;
  }
  
  #productlist{
      margin:0;padding:0; list-style-type:none;
  }
  #productlist li{margin-top:30px;}
  
  
      .grid-container{
          position:relative;
          display:grid;
          grid-template-columns: 130px auto 200px;
          grid-template-rows:auto;
          grid-auto-rows: 100%;
      border:1px solid red;
      }
      
      .grid-container &gt; div{
          border: 1px solid black;
      }
  
      .first{
          
      }
      .second{
          align-self:start;
      }
          .second h2{
              font-size:1.2em;
              color:black;
              margin:0;
          }
              
      .data{
          padding:8px;
          font-size:0.9em;
          grid-row: 1 / span 2;
          grid-column: 3 / 4;
          display:grid;
          grid-template-columns:1fr 1fr;
          grid-gap: 5px;
          align-self: start;
      }
          .gr-2span{          
              grid-column: 1 / span 2;
          }
          .data span{
              display:block;
              font-weight:bold;
          }
      .content{
          font-size:0.9em;
          grid-row: 2/ 3;
          grid-column: 1 / span 2;
          place-self: stretch stretch;
      }
  
              </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;header&gt;
  
      &lt;/header&gt;
      
      &lt;section&gt;
          &lt;ul id="productlist"&gt;
              &lt;li class="grid-container"&gt;
                  &lt;div class="first"&gt;
                      
                  &lt;/div&gt;
                  
                  &lt;div class="second"&gt;
                      &lt;h2&gt;&lt;a href=""&gt;Some title&lt;/a&gt;&lt;/h2&gt;
                  &lt;/div&gt;
                  
                  
                  
                  &lt;div class="data"&gt;
                      &lt;div class="gr-2span"&gt;
                          &lt;span class="product_info_title"&gt;Author(s):&lt;/span&gt;Y. This guy               
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Publisher:&lt;/span&gt;
                          My publis
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Pages:&lt;/span&gt;
                          999
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Yearr:&lt;/span&gt;
                          1464
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Weight:&lt;/span&gt;
                          9900 gr.                        
                      &lt;/div&gt;                  
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Formaat:&lt;/span&gt;
                          30,5x20,5 cm                        
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Price:&lt;/span&gt;
                          &amp;#8364; -
                      &lt;/div&gt;
                      &lt;div class="gr-2span"&gt;
                          &lt;span class="product_info_title"&gt;Extra:&lt;/span&gt;text.                 
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  
                  &lt;div class="gr-2cols content"&gt;
                      &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.&lt;/p&gt;              &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.&lt;/p&gt;              &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.&lt;/p&gt;  
                  &lt;/div&gt;
              
              &lt;/li&gt;
        
              &lt;li class="grid-container"&gt;
                  &lt;div class="first"&gt;
                      
                  &lt;/div&gt;
                  
                  &lt;div class="second"&gt;
                      &lt;h2&gt;&lt;a href=""&gt;Some title&lt;/a&gt;&lt;/h2&gt;
                  &lt;/div&gt;
                  
                  
                  
                  &lt;div class="data"&gt;
                      &lt;div class="gr-2span"&gt;
                          &lt;span class="product_info_title"&gt;Author(s):&lt;/span&gt;Y. This guy               
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Publisher:&lt;/span&gt;
                          My publis
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Pages:&lt;/span&gt;
                          999
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Yearr:&lt;/span&gt;
                          1464
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Weight:&lt;/span&gt;
                          9900 gr.                        
                      &lt;/div&gt;                  
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Formaat:&lt;/span&gt;
                          30,5x20,5 cm                        
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Price:&lt;/span&gt;
                          &amp;#8364; -
                      &lt;/div&gt;
                      &lt;div class="gr-2span"&gt;
                          &lt;span class="product_info_title"&gt;Extra:&lt;/span&gt;text.                 
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  
                  &lt;div class="gr-2cols content"&gt;
                      &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.f&lt;/p&gt; 
                  &lt;/div&gt;
              
              &lt;/li&gt;
        
              &lt;/li&gt;
        
              &lt;li class="grid-container"&gt;
                  &lt;div class="first"&gt;
                      
                  &lt;/div&gt;
                  
                  &lt;div class="second"&gt;
                      &lt;h2&gt;&lt;a href=""&gt;Contrary to popular belief, Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature &lt;/a&gt;&lt;/h2&gt;
                  &lt;/div&gt;
                  
                  
                  
                  &lt;div class="data"&gt;
                      &lt;div class="gr-2span"&gt;
                          &lt;span class="product_info_title"&gt;Author(s):&lt;/span&gt;Y. This guy               
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Publisher:&lt;/span&gt;
                          My publis
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Pages:&lt;/span&gt;
                          999
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Yearr:&lt;/span&gt;
                          1464
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Weight:&lt;/span&gt;
                          9900 gr.                        
                      &lt;/div&gt;                  
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Formaat:&lt;/span&gt;
                          30,5x20,5 cm                        
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="product_info_title"&gt;Price:&lt;/span&gt;
                          &amp;#8364; -
                      &lt;/div&gt;
                      &lt;div class="gr-2span"&gt;
                          &lt;span class="product_info_title"&gt;Extra:&lt;/span&gt;text.                 
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  
                  &lt;div class="gr-2cols content"&gt;
                      &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.f&lt;/p&gt; 
                  &lt;/div&gt;
              
              &lt;/li&gt;     
        
        
      &lt;/ul&gt;
        &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>