尽管我正在创建的布局无法在Safari中正常运行,但在Chrome中却可以完美运行。我感觉这与.wrapper
或有关,.frame
但是我尝试将Flex Shrink值设置0
为无效。
.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。因此,您需要在属性中添加-webkit-
前缀flex
。
.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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句