Grid Items Overflow Out of Parent Container Using CSS Grid

CSS Grid Item overflows the child and parent grid container (in height)

Change this line in .main class:

grid-template-rows: 51px fit-content(30%) auto auto;

I hope this can help you.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
body, html { height: 100%;}body {    margin:0;    font-family: 'Montserrat', sans-serif;    display: grid;    grid-template-rows: auto 50px;    grid-template-columns: 12% auto;    grid-template-areas:        "sidebar right"        "footer footer";}a { text-decoration: none; }ul { list-style-type: none; float:right; }ul li {    display:inline;}ul li a { color: #fff; padding: 15px; }
#logo {    padding: 15px;    margin-left: 15px;    background-color: #F3F1C7;    color: #298383;    text-align:center;    font-weight: bold;    display: inline-block;}header {    background-color: #41C7C7;
    display: grid;    grid-template-columns: [logo-start] fit-content(20%) [nav-start] auto [nav-end];}
section#hero {    background-color: #36ADAD;    padding: 2em;    border-top: 5px solid #2EA0A0;
    display: grid;    grid-template-columns: repeat(2, auto);}
#content h1 {    text-transform: uppercase;    color: #FFFBC5;}
#content p {    color: #fff;}
img {    max-width: 100%;    background-size: cover;    margin: 0 auto;}
#mountain {    border-radius: 50%;    width: 200px;    height: 200px;}
.sidebar {    grid-area: sidebar;    background: #1c9090;    color: #ffffff;    padding: 1em;}
.main {    height: auto;    grid-area: right;    grid-template-rows: 51px fit-content(30%) auto auto;    display: grid;}
footer {    grid-area: footer;    background: lightgray;}
#features {    display: grid;    grid-template-columns: repeat(5, auto);    text-align: center;}
#features i {    font-size: 2em;}
ul#features {    margin: 0; padding: 0;}
ul#features li {    background-color: lightgray;    padding: 1em;}
ul#features li p {    color: #4C4C4C;}
ul#features li:nth-child(1) {    background-color:#E6E6E6;}ul#features li:nth-child(2) {    background-color:#D3D3D3;}ul#features li:nth-child(3) {    background-color:#CACACA;}ul#features li:nth-child(4) {    background-color:#E6E6E6;}ul#features li:nth-child(5) {    background-color:#D3D3D3;}
section#info {    background-color: #F2F2F2;    padding: 2em;
    display: grid;    grid-template-columns: 1.5fr 1fr;}
#mountain-vector {    width: 200px;    align-self: center;}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>CSS Grid Demo</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    <link rel="stylesheet" href="css/main.css"></head><body>    <div class="sidebar">        <p>Some information here</p>    </div>    <div class="main">        <header>            <a href="#" id="logo">ImportantCo</a>
            <nav>                <ul>                    <li><a href="#">Home</a></li>                    <li><a href="#">Services</a></li>                    <li><a href="#">About</a></li>                    <li><a href="#">Contact</a></li>                </ul>            </nav>        </header>
        <section id="hero">            <div id="content">                <h1>Sensible Solutions</h1>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>            </div>            <img src="images/mountain.jpg" id="mountain" alt="<mountain.jpg>">        </section>
        <section id="info">            <div id="content2">                <h2>Reinvention</h2>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>            </div>            <img src="images/vector-mountains.svg" id="mountain-vector" alt="<vector-mountains.svg>">        </section>
        <ul id="features">            <li>                <i class="fa fa-id-card" aria-hidden="true"></i>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>            </li>            <li>                <i class="fa fa-id-card" aria-hidden="true"></i>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>            </li>            <li>                <i class="fa fa-id-card" aria-hidden="true"></i>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>            </li>            <li>                <i class="fa fa-id-card" aria-hidden="true"></i>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>            </li>            <li>                <i class="fa fa-id-card" aria-hidden="true"></i>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>            </li>        </ul>    </div>    <footer>        <p>My footer bar</p>    </footer></body></html>

content overflowing from css grid

I ended up needing 3 things, I'm not entirely sure what the min-width/height: 0 are doing to fix my issue but it works


        .channel-layout-container {
            min-height: 0;  /* NEW */
            min-width: 0;   /* NEW; needed for Firefox */
        }

        .channel-container {
            min-height: 0;  /* NEW */
            min-width: 0;   /* NEW; needed for Firefox */
        }

        img {
            display:block;
            width :100%;
            height:100%;
            object-fit:cover;

        }

html,
body {
    border: 0;
    margin: 0;
    height: 100%;
}

.parent-trap {
    height: 540px;
    width: 960px;
}

/* container for player */
.video-player {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
}

/* container for plaback control bar */
.container-controls {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    background-color: red;
}

/* contains all the .channel-container s */
.channel-layout-container {
    display: grid;
    background: #000;
    background-color: blue;
    flex: 1;
    min-height: 0;  /* NEW */
    min-width: 0;   /* NEW; needed for Firefox */
}

/****
**** FIX HERE
****/

.channel-container {
    min-height: 0;  /* NEW */
    min-width: 0;   /* NEW; needed for Firefox */
}

img {
    display:block;
    width :100%;
    height:100%;
    object-fit:cover;

}

/** THERE ARE OTHER DYNAMIC LAYOUTS, ISSUE IS SAME ON ALL */

/** display4 **/
.channel-layout-container.display4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.channel-layout-container.display4 .channel-container:nth-child(n+5) {
    flex: none;
    display: none;
}

<div class="parent-trap">

    <!-- the classcommes that need to be transferred back over-->
    <div class="video-player">
        <div class="channel-layout-container display4">
            <div class="channel-container" style="background-color: khaki;">
                <img src="https://w.wallhaven.cc/full/3z/wallhaven-3zgz2y.png" />

            </div>
            <div class="channel-container" style="background-color: lavender;">
                SPOT 2
            </div>
            <div class="channel-container" style="background-color: lightcoral;">
                SPOT 3
            </div>
            <div class="channel-container" style="background-color: lightseagreen;">
                <img src="https://www.google.com/favicon.ico" />
            </div>
        </div>
        <div class="container-controls">
            common controls and other info goes here
        </div>
    </div>
</div>

Responsive CSS grid with scrollable cell overflows its parent container

A colleague of mine suggested to use the overflow-y: auto property on the grid container itself. While its effect is not exactly the same as I was looking for, it's very similar and it does prevent the sidebar content from overflowing the container. The only minor difference is that when the available space becomes smaller than the necessary minimum to display the content of the grid, it's the grid container that gets a vertical scroll bar instead of the viewport.

Below is the modified code snippet that demonstrates it.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.bordered {
  border-style: solid;
  border-width: 5px;
}

/* grid layout */

.grid {
  display: grid;
  /* Default (small screen) layout. */
  /* Single column with 3 rows, the last one filling out the remaining space. */
  grid-template-rows: min-content min-content 1fr;
  max-height: 100vh;
  min-height: 100vh;
  min-width: min-content;
  overflow-y: auto; /* <-- the only property added to the original CSS */
}

@media (min-width: 640px) {
  .grid {
    /* Larger screen layout. */
    /* 2 columns with 2 rows, the bottom right cell filling out the remaining space. */
    grid-template-columns: max-content 1fr;
    grid-template-rows: min-content 1fr;
  }

  nav {
    grid-column: span 2 / span 2;
  }
}

aside, nav {
  white-space: nowrap;
}

main {
  overflow-y: auto;
}

<html>

<body>
  <div class="grid bordered" style="border-color: black;">
    <nav class="bordered" style="border-color: green;">Top nav</nav>
    <aside class="bordered" style="border-color: red;">
      <ul>
        <li>Some example sidebar item #1</li>
        <li>Some example sidebar item #2</li>
        <li>Some example sidebar item #3</li>
        <li>Some example sidebar item #4</li>
        <li>Some example sidebar item #5</li>
      </ul>
    </aside>
    <main class="bordered" style="border-color: cyan;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </main>
  </div>
</body>

</html>

CSS grid row overflows its container vertically

Something to know is that as soon as a min height of a row, or the combined height of multiple rows is grater than the height of the viewport, you would have a scroll. Beyond that, the snippet below I hope do what you are looking for. I added comments in the code.

/* lines I added */
*{
  box-sizing: border-box;
}

body {
  margin: 0;
}
 
.grid {
  display: grid;
  /* 100 is for the small viewport here in the code snippet */
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  min-height : 100vh;
  
}

.bordered {
  border: 10px solid green;
}

<div class="grid bordered" style="border-color: red;">
  <div class="bordered">Some content</div>
</div>

Why are grid items overflowing the grid container?

This is the source of the problem:

grid-gap: 2% 3%

It appears that the percentage grid gaps are being factored into the layout after the rendering engine has set the dimensions of the container.

It may also be an issue with what the percentages are being based on (container height? row height? something else?).

Either way, percentage values for grid gaps are causing grid items to overflow the grid container.

Try using a different unit of length, such as vh, px or em. They seem to work fine.

In the demo below, I used grid-gap: 2vh 3vh.

#allyes {  position: relative;  width: 100%;  height: auto;  background-image: url('../img/fondo-laptop.webp');  background-repeat: no-repeat;  background-position: center;  background-size: cover;  background-attachment: fixed;}
#allyes #allyesLogos {  height: auto;  margin-left: auto;  width: 60%;  padding: 2% 3%;  background: rgba(255, 255, 255, 0.6);}
#allyes #allyesTitle {  font-size: var(--bigTitleSize);  font-family: var(--titleFamily);  color: white;  text-transform: uppercase;  margin-bottom: 5vh;  text-shadow: 2px 2px rgba(0, 0, 0, 0.6);}
#allyesLogos .logosTable {  width: 100%;  height: auto;  display: grid;  margin-bottom: 5vh;  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  grid-auto-rows: 70px;  align-items: center;  justify-items: center;  /* grid-gap: 2% 3%; */    grid-gap: 2vh 3vh; /* adjustment */  border: 1px solid red; /* demo */}

<section id="allyes">  <div id="allyesLogos">    <h1 id="allyesTitle">alianzas comericales</h1>    <div class="logosTable">      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>    </div>  </div></section>

CSS Grid grid-auto-rows: 100% children overflow parent

Since you have a fixed number of rows using grid-auto-rows isn't the right way to do.

It's better to explicitly define grid-template-rows like:

.grid-container{
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr 200px;
  grid-template-rows: auto 1fr;
  border: 1px solid red;
}

There is others issues in your CSS, you use the keyword span, this keyword is used to add elements. This isn't necessary in your case. So you can replace lines like this:

grid-row: 1 / span 2;

by:

grid-row: 1 / 3;

Find below the working snippet with the edits :

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 1fr 200px;
        grid-template-rows: auto 1fr;
    border:1px solid red;
    }
    
    .grid-container > 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 / 3;
        grid-column: 3;
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-gap: 5px;
        align-self: start;
    }
        .gr-2span{          
            grid-column: 1 / 2;
        }
        .data span{
            display:block;
            font-weight:bold;
        }
    .content{
        font-size:0.9em;
        grid-row: 2;
        grid-column: 1 / 3;
        place-self: stretch stretch;
    }

    <header>

    </header>
    
    <section>
        <ul id="productlist">
            <li class="grid-container">
                <div class="first">
                    
                </div>
                
                <div class="second">
                    <h2><a href="">Some title</a></h2>
                </div>
                
                
                
                <div class="data">
                    <div class="gr-2span">
                        <span class="product_info_title">Author(s):</span>Y. This guy               
                    </div>
                    <div>
                        <span class="product_info_title">Publisher:</span>
                        My publis
                    </div>
                    <div>
                        <span class="product_info_title">Pages:</span>
                        999
                    </div>
                    <div>
                        <span class="product_info_title">Yearr:</span>
                        1464
                    </div>
                    <div>
                        <span class="product_info_title">Weight:</span>
                        9900 gr.                        
                    </div>                  
                    <div>
                        <span class="product_info_title">Formaat:</span>
                        30,5x20,5 cm                        
                    </div>
                    <div>
                        <span class="product_info_title">Price:</span>
                        € -
                    </div>
                    <div class="gr-2span">
                        <span class="product_info_title">Extra:</span>text.                 
                    </div>
                </div>
                
                
                <div class="gr-2cols content">
                    <p>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.</p>              <p>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.</p>              <p>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.</p>  
                </div>
            
            </li>
      
            <li class="grid-container">
                <div class="first">
                    
                </div>
                
                <div class="second">
                    <h2><a href="">Some title</a></h2>
                </div>
                
                
                
                <div class="data">
                    <div class="gr-2span">
                        <span class="product_info_title">Author(s):</span>Y. This guy               
                    </div>
                    <div>
                        <span class="product_info_title">Publisher:</span>
                        My publis
                    </div>
                    <div>
                        <span class="product_info_title">Pages:</span>
                        999
                    </div>
                    <div>
                        <span class="product_info_title">Yearr:</span>
                        1464
                    </div>
                    <div>
                        <span class="product_info_title">Weight:</span>
                        9900 gr.                        
                    </div>                  
                    <div>
                        <span class="product_info_title">Formaat:</span>
                        30,5x20,5 cm                        
                    </div>
                    <div>
                        <span class="product_info_title">Price:</span>
                        € -
                    </div>
                    <div class="gr-2span">
                        <span class="product_info_title">Extra:</span>text.                 
                    </div>
                </div>
                
                
                <div class="gr-2cols content">
                    <p>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</p> 
                </div>
            
            </li>
      
            </li>
      
            <li class="grid-container">
                <div class="first">
                    
                </div>
                
                <div class="second">
                    <h2><a href="">Contrary to popular belief, Lorem Ipsum is not simply random text  It has roots in a piece of classical Latin literature </a></h2>
                </div>
                
                
                
                <div class="data">
                    <div class="gr-2span">
                        <span class="product_info_title">Author(s):</span>Y. This guy               
                    </div>
                    <div>
                        <span class="product_info_title">Publisher:</span>
                        My publis
                    </div>
                    <div>
                        <span class="product_info_title">Pages:</span>
                        999
                    </div>
                    <div>
                        <span class="product_info_title">Yearr:</span>
                        1464
                    </div>
                    <div>
                        <span class="product_info_title">Weight:</span>
                        9900 gr.                        
                    </div>                  
                    <div>
                        <span class="product_info_title">Formaat:</span>
                        30,5x20,5 cm                        
                    </div>
                    <div>
                        <span class="product_info_title">Price:</span>
                        € -
                    </div>
                    <div class="gr-2span">
                        <span class="product_info_title">Extra:</span>text.                 
                    </div>
                </div>
                
                
                <div class="gr-2cols content">
                    <p>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</p> 
                </div>
            
            </li>     
      
      
    </ul>
      </section>

CSS Grid: Grid-gap causing items to overflow?

Update the code like below (relate