CSS Grid and Absolute Positioning on Safari

Question

I have a problem with a css grid layout.

The grid container is absolutely positioned and the grid-template-rows contains an 1fr to allow one row to take all the free space.

This displays correctly on all current browsers except the latest Safari installed with macOS 10.13.2

The issue seems to be caused by it not calculating the freespace if the height is not explicitly set.

Am I missing something or is there a workaround?

jsfiddle example

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

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-rows: 1fr 150px;
  grid-template-columns: 1fr 150px;
  grid-template-areas: "a b" "c d";
}

.wrapper>div {
  outline: solid 1px #aaa;
  padding: 10px;
}

.game {
  grid-area: a;
}

.player {
  grid-area: b;
}

.rules {
  grid-area: d;
}

.controls {
  grid-area: c;
}

<div class="wrapper">
  <div class="game">game</div>
  <div class="player">player</div>
  <div class="rules">rules</div>
  <div class="controls">controls</div>
</div>

Answer 1

In 2017 top: 0; bottom 0 is more like a dirty hack. Just give the .wrapper a minimum height as 100% of the viewport - 100vh.

.wrapper {
  min-height: 100vh;
}