Safari / Chrome flex-parent 100% height + padding 和 100% height child答案

【问题标题】：Safari / Chrome flex-parent 100% height + padding and 100% height childSafari / Chrome flex-parent 100% height + padding 和 100% height child
【发布时间】：2017-01-24 09:52:57
【问题描述】：

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/

【问题讨论】：

你试过加box-sizing: border-box吗？ jsfiddle.net/zqjpzLLb/1
在 Safari 中的这个小提琴填充小于 Chrome 中的填充
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建最小、完整和可验证的示例。

标签： html css google-chrome safari flexbox

【解决方案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/

【讨论】：