我在 Safari 中遇到了一个奇怪的 Flexbox 高度问题。
在 Chrome 中,center
div 位于 body
div 内的 100% 高度。
在 Safari 中,center
div 超过其容器的 100% 高度;看起来它需要额外占用其上方 hero
元素的 50%。
有人见过这个吗?
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
background-color: #EEE;
flex: 1;
flex-direction: column;
display: flex;
}
#hero {
display: flex;
flex-direction: column;
background-color: #DDD;
width: 100%;
height: 100px;
text-align: center;
}
#body {
background: #CCC;
flex: 1;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#center {
background: #BBB;
flex: 1;
height: 100%;
max-width: 800px;
margin: 0 20px;
}
<div id="container">
<div id="hero">hero</div>
<div id="body">
<a href="#">Left</a>
<div id="center">center</div>
<a href="#">Right</a>
</div>
</div>
最佳答案
似乎 #center
上的 height: 100%;
是这里的原因。相反,您可以在父级上使用 align-items:stretch;
,然后 flex 子级以使其内容居中:
#body {
background: #CCC;
flex: 1;
flex-direction: row;
justify-content: center;
display: flex;
align-items: stretch;
height: 100%;
width: 100%;
}
#body > * {
display: flex;
align-items: center;
}
#center {
background: #BBB;
flex: 1;
max-width: 800px;
margin: 0 20px;
align-items: flex-start;
}
关于html - Flexbox 子项在 Safari 中超出其高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46078266/