Content overflowing grid container

Question

I'm currently working on the below CSS/Grid layout.

The problem that I ran into, is that when I write text into one of the center columns which expands beyond the actual viewport, the three column divs don't grow with the content as expected.

What actually happens, is that the text just appears somewhere below page.

Deleting the height:100vh property in .wrapper solves this issue, however, this ends up eliminating my header div.

Any ideas as to what is wrong here?

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.item-header {
  grid-area: header;
  background-color: blue;
}

.item-nav {
  grid-area: navigation;
  background-color: grey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: green;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: black;
}

.wrapper {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5% 7.5% 79% 7%;
  grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer";
}

<div class="wrapper">
  <div class="item-header"></div>
  <div class="item-nav"></div>
  <div class="item-leftcol"></div>
  <div class="item-centercol"></div>
  <div class="item-rightcol"></div>
  <div class="item-footer"></div>
</div>

That doesn't do anything. My browser is Firefox 52.5.1 by the way. — nightowl, Jan 26 '18 at 02:52
Very similar implementation: https://github.com/rhroyston/golden-grid — Ronnie Royston, Jan 26 '18 at 04:28

score 0 · Accepted Answer · answered Jan 26 '18 at 12:22

Don't use height:100% on the body use min-height instead and then switching out the 79% for 1fr on your content column seems to fix this.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer";
  grid-template-rows: 6.5% 7.5% 1fr 7%;
}

.item-header {
  grid-area: header;
  background-color: blue;
  color: white;
}

.item-nav {
  grid-area: navigation;
  background-color: grey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: green;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: black;
  color: white
}

<div class="wrapper">
  <div class="item-header"></div>
  <div class="item-nav"></div>
  <div class="item-leftcol"></div>
  <div class="item-centercol">
    <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem
      ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum
      dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor
      sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit
      amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet
      consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur,
      adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. </div>
  </div>
  <div class="item-rightcol"></div>
  <div class="item-footer"></div>
</div>

Michael Benjamin · Answer 2 · 2018-01-26T18:29:30.140

You have your explicit rows defined with percentages:

grid-template-rows: 6.5% 7.5% 79% 7%

This works, to an extent, because you have a fixed height specified on the container:

height: 100vh

Each row renders at its defined height because percentage height values normally need a point of reference from a "parent's" height value to work (more details).

But once you remove that height declaration, all percentage values on the children fail – they fallback to auto, which means content height. But since there is no content, the rows collapse to 0. Hence, the entire layout collapses.

.wrapper {
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5% 7.5% 79% 7%;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}

nothing to see here
<div class="wrapper">
  <div class="item-header"></div>
  <div class="item-nav"></div>
  <div class="item-leftcol"></div>
  <div class="item-centercol"></div>
  <div class="item-rightcol"></div>
  <div class="item-footer"></div>
</div>

If you want to access overflowing content in a container with a fixed height, then use the overflow property:

.item-centercol {
  overflow: auto;
 }

.wrapper {
  height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5% 7.5% 79% 7%;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  overflow: auto; /* NEW */
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">navigation</div>
  <div class="item-leftcol">left col</div>
  <div class="item-centercol">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </div>
  <div class="item-rightcol">right col</div>
  <div class="item-footer">footer</div>
</div>

If you want the entire layout to expand with content, then use min-height and switch from percentage to fr units on the rows:

.wrapper {
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5fr 7.5fr 79fr 7fr;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">navigation</div>
  <div class="item-leftcol">left col</div>
  <div class="item-centercol">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </div>
  <div class="item-rightcol">right col</div>
  <div class="item-footer">footer</div>
</div>

jsFiddle demo

More info:

Content overflowing grid container

2 Answers2

jsFiddle demo