1

I want to integrate a layout like this one https://jsfiddle.net/przemcio/xLhLuzf9/3/ inside of a larger CSS grid layout. However, it all breaks as soon as a container has the property display: grid. By "breaks", I mean that the desired flexbox shrinking properties of the .content div does not apply, and it does not shrink and allow the footer's content to show above the scroll fold.

This is a barebones demo, but in my bigger app there's the same behavior. Why does CSS Grid break this kind of layout, even inside of a child cell, and how can I fix it?

Demo:

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

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  height: 100%;
  display: block;
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}
<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
jan
  • 73
  • 5

1 Answers1

1

No need to specify height:100% to the grid item as it will create an unexpected result. Then you should hide the overflow or enable the scroll.

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

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  /*height: 100%;*/
  overflow:auto;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}
<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

You can also keep height:100% and specify 100vh within the rows template. In the this case, the percentage height will behave as intended:

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

.grid {
  /* this line breaks it: */
  display: grid;
  grid-template-rows:100vh;
}

.cell {
  height: 100%;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}
<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks so much! For anyone interested, my fix was related to my use of https://github.com/azz/styled-css-grid. Rather than explicitly specifying the `rows` property in the `Grid` element (I was using some weird setting that wasn't necessary), I let it use the defaults, which magically fixed everything. – jan Dec 26 '18 at 19:06
  • Follow up note: if you have more than 1 row, for this row in particular, setting its track height to `minmax(0px, auto)` somehow does the trick (and simply `auto` doesn't). – jan Dec 26 '18 at 19:26