Html Flexbox 在 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28976288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox not working in Safari
提问by Chris Dance
The layout I am creating isn't working in Safari though it works perfectly in Chrome. I have a feeling it has something to do with the .wrapperor the .framebut I have tried setting the Flex Shrink value to 0to no avail.
我正在创建的布局在 Safari 中不起作用，尽管它在 Chrome 中运行良好。我有一种感觉，它与 the.wrapper或 the 有关，.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;
}
I also feel there may be a better way of using Flexbox without the need for the wrapper but can't get my head around it.
我也觉得可能有一种更好的方式来使用 Flexbox 而不需要包装器，但我无法理解它。
Any help would be really appreciated!
任何帮助将非常感激！
采纳答案by Alexander O'Mara
The issue is on your .contentclass. Specifically, in this section of code.
问题出在你的.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 still requires the -webkit-prefix to use flexbox. So you will need to add the -webkit-prefix to you flexproperty.
Safari 仍然需要-webkit-前缀才能使用flexbox。因此，您需要将-webkit-前缀添加到您的flex属性中。
Example (JSFiddle):
示例（JSFiddle）：
.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;
}
