我正在创建的布局在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可能有更好的方法,但无法理解它。
任何帮助都会非常感激!
答案 0 :(得分:10)
问题出在您的.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;
}