Safari / Chrome flex-parent 100％身高+填充和100％身高的孩子

Question

Safari使child块的高度大于Chrome。

我需要在Chrome和Safari中实现相同的阻止行为。

Chrome中的填充会影响child's height。 Safari中的填充总和为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

使用JSFiddle时，您的iframe客户端高度是否相同？因为这些也会影响身高。

我设法使用以下代码获得相同高度的跨浏览器：

* {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>

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