Html Safari/Chrome flex双亲100%高&x2B；填充和100%高度的儿童

Safari使

child

block的高度大于Chrome

我需要在Chrome和Safari中实现相同的块行为

镀铬填充物会影响孩子的身高。Safari中的填充和

高度

.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%;
}

---

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

我已使用以下代码成功获得了相同高度的跨浏览器：

*{框大小：边框框；}
正文，html{
身高：100%；
}
.身体{
显示器：flex；
调整内容：灵活启动；
弯曲方向：立柱；
柔性包装：nowrap；
身高：100%；
背景色：#4f4；
}
.标题{
高度：60px；
宽度：100%；
背景色：#4a4；
}
.ctn{
display:inherit；/*为_子级内部生长继承显示flex*/
flex grow:1；/*确保它填满剩余的父空间*/
宽度：100%；
填充底部：80px；
背景颜色：蓝色；
}
.ctn\u儿童{
flex grow:1；/*让子类填充.ctn类中的所有剩余空间*/
最小宽度：100%；
背景色：rgba（2551000.8）；
}

标题
小孩

是否尝试添加

框大小：边框框

？在这种情况下，Safari中的fiddle padding小于ChromeQuestions中的padding寻求调试帮助（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建一个最小、完整且可验证的示例。