flex计算后高度在搜狗7.0下子元素高度不是根据父元素计算么？
请输入代码搜狗7.0浏览器（chrome/45）与chrome63表现不一致（windows下会出现2个滚动条），经查看发现内部两个div(#div1,#div2)高度并非根据.bottom高度进行计算，所以这里有一些疑问，flex计算得到的高度在某些浏览器内会导致子元素的计算问题么。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
}
.menu {
width: 50px;
height: 100%;
background-color: #000111;
flex-shrink: 0;
}
.body {
width: 100%;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
background-color: #fff111;
flex-shrink: 0;
}
.bottom {
width: 100%;
height: 100%;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="menu"></div>
<div class="body">
<div class="top"></div>
<div class="bottom">
<div id="div1" style="width: 100%;height: 100%;overflow: auto;">
<div id="div2" style="width: 100%;height: 120%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
坑啊，我也遇到这个问题，在谷歌浏览器是可以继承的。