Flexbox在Safari中不工作 [英] Flexbox not working in Safari

问题描述

我创建的布局在Safari中不起作用，虽然它在Chrome中工作得很好。我有一个感觉，它与 .wrapper 或 .frame 有关，但我已经尝试设置Flex将值缩小到 0 无效。

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 .wrapper or the .frame but I have tried setting the Flex Shrink value to 0 to no avail.

JSFiddle

.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，

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.

任何帮助都会非常感激。

Any help would be really appreciated!

推荐答案

问题出现在您的 .content 课上。具体来说，在这段代码中。

The issue is on your .content class. Specifically, in this section of code.

.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 。因此，您需要在 flex 属性中添加 -webkit - 前缀。

Safari still requires the -webkit- prefix to use flexbox. So you will need to add the -webkit- prefix to you flex property.

.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;
}

这篇关于Flexbox在Safari中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！