title: Safari / Chrome flex-parent 100% height + padding and 100% height child
body: <p>Safari makes <code>child</code> block's height larger than Chrome.</p>
  
  <p>I need to implement the block behaviour same in Chrome and in Safari.</p>
  
  <p>Padding in Chrome affects on <code>child's height</code>. Padding in Safari sums with <code>height</code>.</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/zqjpzLLb/" rel="nofollow">https://jsfiddle.net/zqjpzLLb/</a></p>