CSS3 Flexbox 不会在 iOS 上通过溢出滚动扩展其宽度

Question

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

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

但是当我在 iOS 上模拟它时（iOS 7.1.1 在 iPad 上）我得到这个：

它是可滚动的，但 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 的宽度设置为较大的值（例如 2000 像素），这些项目又会很好地间隔开。

在我看来 -webkit-overflow-scrolling 是问题的原因。有人对此有经验吗？

Answer 1

嗯，首先你使用 div #id 你应该使用 .class

a .class 用于选择多个实例，因为 #id 用于一个独特的实例。

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

您可以先尝试使用 px 或 %（而不是 vw），其中您有：width: 15vw; 或者为演员框定义一个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
  }

更新：（回复：您的评论）

如果 #actorsBox 上的 2000px 响应良好，那么您可能还需要添加一个 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 定义的地方定义宽度。这可能是您的问题；如果以上仍然不起作用，请尝试添加此 position:relative；确保 .actor 相对于此作为包装器

CSS3 Flexbox 不会在 iOS 上通过溢出滚动扩展其宽度

CSS3 Flexbox does not extend its width on iOS with overflow-scroll

css

webkit

ios

ionic-framework