Safari / Chrome flex-parent 100% height + padding and 100% child height

Question

Safari makes block height childbigger than Chrome.

I need to implement block behavior in Chrome and Safari.

Chrome padding affects child height. Filling in Safari amounts with height.

.body {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
}

.header {
  height: 60px;
  width: 100%;
}

.ctn {
  height: 100%;
  width: 100%;
  padding-bottom: 80px;
}

.ctn__child {
  min-width: 100%;
  height: 100%;
}

https://jsfiddle.net/zqjpzLLb/

Answer 1

Are your iframe customer ratings the same when using JSFiddle? They also affect height.

I managed to get the same high-altitude cross browser using the following code:

* {box-sizing: border-box;}

body, html {
  height: 100%;
}

.body {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  background-color: #4f4;
}

.header {
  height: 60px;
  width: 100%;
  background-color: #4a4;
}

.ctn {
  display: inherit; /* Inherit display flex for __child grow inside */
  flex-grow: 1; /* Make sure it fills up the remaining parent space */
  width: 100%;
  padding-bottom: 80px;
  background-color: blue;
}

.ctn__child {
  flex-grow: 1; /* Let the child fill all the remaining space inside the .ctn class */
  min-width: 100%;
  background-color: rgba(255, 100, 100, .8);
}

<div class="body">
  <div class="header">Header</div>
  <div class="ctn">
    <div class="ctn__child">
      child
    </div>
  </div>
</div>

Run codeHide result

https://jsfiddle.net/zqjpzLLb/17/