Html Safari中的弹性物品溢出容器

出于某些原因，Safari中的flex项目没有留在容器内

以下是Chrome和Firefox中的布局：

以下是Safari中的外观：

这是我的密码：

#第1部分{
背景：黑色；
宽度：250px；
高度：600px；
显示器：flex；
弯曲方向：立柱；
垫底：5px
}
#第二组{
背景：粉红色；
颜色：#FFF；
宽度：240px；
高度：200px
}
#第三组{
背景：蓝色；
颜色：#FFF；
宽度：240px；
身高：100%；
职位：相对
}

测试
测试2

问题 您有一个高度为600px的容器

此容器有两个子容器：

• 一个孩子有

  身高：200px

• 另一个孩子的身高为100%

由于百分比高度基于父级的高度，因此您将第二个子级的高度设置为等于容器的全高

百分比

指定高度百分比。百分比是根据生成的长方体包含块的高度计算的

因此，会发生溢出：

(200px + 600px) > 600px

除了在flex容器中，初始设置为。这意味着flex项目可以收缩以适应容器内部。Chrome和Firefox正确应用此设置，允许高度为100%的元素收缩以适合。显然，Safari有不同的解释

---

解决 您可以使用以下方法来解决此问题：

#div3 {
  height: calc(100% - 200px);
}

#第1部分{
背景：黑色；
宽度：250px；
高度：600px；
显示器：flex；
弯曲方向：立柱；
垫底：5px
}
#第二组{
背景：粉红色；
颜色：#FFF；
宽度：240px；
高度：200px
}
#第三组{
背景：蓝色；
颜色：#FFF；
宽度：240px；
高度：计算（100%-200px）；
}

测试
测试2

问题 您有一个高度为600px的容器

此容器有两个子容器：

• 一个孩子有

  身高：200px

• 另一个孩子的身高为100%

由于百分比高度基于父级的高度，因此您将第二个子级的高度设置为等于容器的全高

百分比

指定高度百分比。百分比是根据生成的长方体包含块的高度计算的

因此，会发生溢出：

(200px + 600px) > 600px

除了在flex容器中，初始设置为。这意味着flex项目可以收缩以适应容器内部。Chrome和Firefox正确应用此设置，允许高度为100%的元素收缩以适合。显然，Safari有不同的解释

---

解决 您可以使用以下方法来解决此问题：

#div3 {
  height: calc(100% - 200px);
}

#第1部分{
背景：黑色；
宽度：250px；
高度：600px；
显示器：flex；
弯曲方向：立柱；
垫底：5px
}
#第二组{
背景：粉红色；
颜色：#FFF；
宽度：240px；
高度：200px
}
#第三组{
背景：蓝色；
颜色：#FFF；
宽度：240px；
高度：计算（100%-200px）；
}

测试
测试2

有时人们会提出好的问题。社区提供答案。然后询问者删除帖子！我复制了这个问题（为了清晰起见做了一些编辑），并添加了我的原始答案。任何其他研究原始问题的人，请随意在这里添加您的答案。我在css标签中跟踪您，当我查看您的个人资料时，我问自己，为什么这个人通常会自己发布问题和答案。现在我知道答案了。哈哈，坚持下去，伙计！有时人们会提出好问题。社区提供答案。然后询问者删除帖子！我复制了这个问题（为了清晰起见做了一些编辑），并添加了我的原始答案。任何其他研究原始问题的人，请随意在这里添加您的答案。我在css标签中跟踪您，当我查看您的个人资料时，我问自己，为什么这个人通常会自己发布问题和答案。现在我知道答案了。哈哈，坚持下去，伙计！你实际上是在让世界变得更好：P你实际上是在让世界变得更好：P