CSS grid items overflow grid container when using "align-content: space-between" and a sticky header

Question

I have a basic layout where my CSS grid is positioned within a flex layout so that the grid is taking over all the available space that is left besides the Footer.

The header is positioned with position: sticky;.

The items within the grid are not taking up all the height that is available in the grid.

In my CSS grid layout I'm using align-content: space-between; so that the both items are positioned at the top and bottom of the grid with some blank space in-between.

This looks good on Chrome and on FF but on Safari (Mac & iOS) the second grid item is put outside of the grid (by the height of my sticky header).

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.flex {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999999;
  padding: 3em;
  background-color: tomato;
}


footer {
  padding: 1em;
  background-color: tomato;
}

.grid {
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  -webkit-align-content: space-between;
  align-content: space-between;
  background-color: khaki;
}

.item {
  box-sizing: border-box;
  padding: 0.6em;
}

.pink {
  background-color: pink;
}

.orange {
  background-color: orange;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="flex">
      <header>Header</header>
      <div class="grid">
        <div class="item pink">Item 1</div>
        <div class="item orange">Item 2</div>
      </div>
      <footer>Footer</footer>
    </div>  
  </body>
</html>

Don't have access to Safari right now, but your Q & A bring this mind: https://stackoverflow.com/q/40490954/3597276 — Michael Benjamin, Jan 16 '19 at 02:06
You may also need to define on height on the grid container, for `align-content: space-between` to work properly in Safari. https://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Jan 16 '19 at 02:08
@Michael_B thanks! That seems to be the exact same issue on Safari. Changing `min-height: 100vh;` to `height: 100vh;` on the `.flex` container fixes the issue. — flavordaaave, Jan 17 '19 at 08:48

flavordaaave · Answer 1 · 2019-01-17T08:53:58.950

I somehow "fixed" this by wrapping my whole page within another grid. But I'd really appreciate if someone comes up with a better/cleaner solution to this.

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.wrapper {
  min-height: 100vh;
  width: 100%;
  display: grid;
  flex-direction: column;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}

.flex {
  align-self: stretch;
  justify-self: stretch;
  background-color: lime;
  display: flex;
  flex-direction: column;
}

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999999;
  padding: 3em;
  background-color: tomato;
}


footer {
  padding: 1em;
  background-color: tomato;
}

.grid {
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  -webkit-align-content: space-between;
  align-content: space-between;
  background-color: khaki;
}

.item {
  box-sizing: border-box;
  padding: 0.6em;
}

.pink {
  background-color: pink;
}

.orange {
  background-color: orange;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="flex">
        <header>Header</header>
        <div class="grid">
          <div class="item pink">Item 2</div>
          <div class="item orange">Item 2</div>
        </div>
        <footer>Footer</footer>
      </div>  
    </div>
  </body>
</html>

UPDATE: Thanks to @Michael_B 's comment I found a cleaner way to fix this by changing min-height: 100%; to height: 100%; on the .flex container.

CSS grid items overflow grid container when using "align-content: space-between" and a sticky header

1 Answers1