ios - CSS3 Flexbox 不会在 iOS 上使用溢出滚动扩展其宽度

Question

我正在用 Ionic 编写一个简单的电影数据库应用程序。其中一部分是列出 Actor ，他们在电影中扮演一个可滚动的垂直卡片列表。我正在使用好的 ol' 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 GMT 25.6.2015

感谢 COOOL的回答我能够追踪这种行为的起源，所以我更新了这个问题:

在浏览器中， overflow-scroll扩展 flexbox 以容纳所有具有原始宽度的元素。然而，对于当前的代码，iOS 只是将它们全部压缩到 flexbox 的原始尺寸中。如果我放置超过 100 像素的任何内容，它们会再次重叠(参见下面的代码)。

#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 的区域

一个 .class用于选择多个实例作为 #id是针对一个独特的实例。

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

您可以先尝试使用px或 % (而不是 vw )你有这个:width: 15vw;或者定义一个 min-width对于 Actor 框。

.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 react 良好，那么您可能需要添加 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相对于此作为包装器