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

I am programming a simple movieDB app with Ionic. A part of it is listing actors, who play in a movie as a scrollable vertical card list. I am using good ol' divs and custom CSS.

This is how it looks like in a browser (Firefox 38 on Mac): this is the DESIRED behavior

Desired behavior

however when I emulate it on iOS (iOS 7.1.1 on iPad) I get this:

Funny iOS behavior

It is scrollable, but the divs overlap. They are collapsed.

You can find my CSS code below. I believe that I have tried a combination of every -webkit tag out there and I still can't get it to work.

Any help greatly appreciated :)

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

UPDATE 7:45 GMT 25.6.2015

Thanks to COOOL's answer I am able to track the origin of this behavior, so I am updating the question:

In browsers, overflow-scroll extends the flexbox to accomodate all items with their original widths. However with the current code, iOS just squeezes them all in the original dimensions of the flexbox. If I were to put anything more than 100px they would overlap again (see the code below).

squeezed elements

#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;

However if I set width of #actorsBox to something big (say 2000px) the items are spaced out nicely again.

It seems to me that -webkit-overflow-scrolling is the cause of the issue. Does anyone have some experience with this?

Well, firstly your using a div #id for an area you should be using a .class

a .class is for selecting multiple instances as an #id is for one unique instance.

It looks like you have #actor as the selector of the problematic content. And it looks like your width is being ignored.

You can firstly try using px or % (instead of vw) where you have this: width: 15vw; Or define a min-width for the actor boxes.

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

Update: (re: your comment)

If 2000px on #actorsBox responded well, then you may need to add a min-width there as well. (or at-least define a 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;
    }

In any case you need a width defined where you have an overflow-scroll defined. This is likely your issue; if the above still doesn't work try also adding this position:relative; to assure .actor is relative to this as a wrapper