CSS3 Flexbox不会在iOS上使用overflow-scroll扩展其宽度

Question

我正在用Ionic编写一个简单的movieDB应用程序。其中一部分是列出演员，他们在电影中扮演可滚动的垂直卡片列表。我正在使用好的ol＆＃39; div和自定义CSS。

这就是它在浏览器中的样子（Mac上的Firefox 38）：这是渴望的行为

然而，当我在iOS上模拟它（iPad上的iOS 7.1.1）时，我得到了这个：

它是可滚动的，但div重叠。他们崩溃了。

您可以在下面找到我的CSS代码。我相信我已经尝试了每个-webkit标签的组合，但我仍然无法让它工作。

任何帮助都非常感谢：）

#actorsBox{
display: flex;
display: -webkit-flex;

flex-direction: row;

-webkit-justify-content: space-between;

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

align-items: center;

#actor {
  height: 30vh;
  width: 15vw;

  margin-left: 2vw;
  padding-top: 12vh;
  border-radius: 5px;

  text-align: center;

  background-color: cornflowerblue;
}}

更新格林威治标准时间7月45日25.6.2015

感谢COOOL的答案，我能够跟踪此行为的来源，因此我正在更新问题：

在浏览器中，overflow-scroll扩展了flexbox以容纳所有具有原始宽度的项目。但是对于当前的代码，iOS只是将它们全部压缩在flexbox的原始尺寸中。如果我要放置超过100px的任何东西，它们将再次重叠（参见下面的代码）。

#actorsBox{

display: flex;
display: -webkit-flex;

flex-direction: row;

-webkit-justify-content: space-between;

overflow-y: scroll;
overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;

align-items: center;

.actor {
  height: 30vh;
  width: 100px;
  min-width: 100px;

但是，如果我将#actorsBox的宽度设置为大（比如说2000px）那么项目会再次间隔得很好。

在我看来，-webkit-overflow-scrolling是导致问题的原因。有没有人有这方面的经验？

Answer 1

嗯，首先您使用div #id 表示您应该使用的区域 .class

.class 用于选择多个实例，因为 #id 适用于一个唯一的实例。

看起来您有#actor作为有问题内容的选择器。看起来你的width被忽略了。

您可以首先尝试使用px或%（而不是vw）：width: 15vw; 或者为actor框定义min-width。

.actor { // firstly change to a class
  height: 30vh;
  width: 15vw; // mobile browser could dislike this, if below doesn't work try using % or px
  min-width: 20px; // or whatever is relevant, may require some testing
  /// the rest of your cool styles
  }

更新 :(重新：您的评论）

如果2000px上的#actorsBox响应良好，那么您可能还需要在其中添加min-width。 （或至少定义宽度）

    #actorsBox{
    // all your previous styles
    width: 1000px; // hows it gonna know when to overflow, bro?
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    // I would add min-width in px then width 100% and a max-width in px
    // but declaring a width here is all you need
    align-items: center;
    }

在任何情况下，您都需要定义一个宽度，其中 overflow-scroll 已定义。这可能是你的问题;如果以上仍然不起作用，请尝试添加此位置：relative;确保.actor相对于此作为包装