我创建的布局在 Safari 中不起作用,但在 Chrome 中完美运行。我有一种感觉,这与.wrapper
or the .frame
但我尝试将 Flex Shrink 值设置为0
无济于事。
JSFiddle https://jsfiddle.net/s6h8j1sz/
.frame {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100vh;
position: relative;
overflow: hidden;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.wrapper {
-webkit-flex: 1 0 auto !important;
-ms-flex: 1 0 auto !important;
flex: 1 0 auto !important;
-webkit-flex-wrap: nowrap !important;
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.row,
.wrapper {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
我还觉得可能有一种更好的方法来使用 Flexbox,而不需要包装器,但我无法理解它。
任何帮助将非常感激!
问题在于你的.content
班级。具体来说,在这一段代码中。
.content {
display: block;
flex: 1 1 auto;
background: #ddd;
height: auto;
overflow-y: auto;
overflow-x: hidden;
padding-right:.5em;
padding-bottom:.5em;
}
Safari 仍然需要-webkit-
要使用的前缀flexbox http://caniuse.com/#feat=flexbox。所以你需要添加-webkit-
你的前缀flex
财产。
例子 (JSFiddle https://jsfiddle.net/xdsuozxf/):
.content {
display: block;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
background: #ddd;
height: auto;
overflow-y: auto;
overflow-x: hidden;
padding-right:.5em;
padding-bottom:.5em;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)