flex-wrap: wrap not working on mobile iOS

Question

I have this that works fine on my laptop, but not on mobile iOS.

* {
  /* normalize */
  padding: 0;
  margin: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  background: 0 0;
  min-height: 0;
  user-select: none;
  box-sizing: border-box;
  position: relative;
}

#a {
  display: flex;
  max-width: 100vw;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
}

#b {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  padding: 50px;
}

#c {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  width: 100%;
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}

<div id="a">
  <div id="b">
    <ul id="c">
      <li>foo</li>
      <li>hello</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
    </ul>
  </div>
</div>

However, on mobile it as a few rows, but mostly it overflows to the right. Like it will have 2 or 3 rows but then 15 or 20 items per row (when only 2 or 3 fit on screen). I haven't been able to get it working since I don't have a good system to debug on mobile.

Answer 1

Update the style on li . Change flex: 1; to flex: 1 0 auto; and remove width: 100%

li {
  flex: 1 0 auto;
  /* width: 100%; */
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}

* {
  /* normalize */
  padding: 0;
  margin: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  background: 0 0;
  min-height: 0;
  user-select: none;
  box-sizing: border-box;
  position: relative;
}

#a {
  display: flex;
  max-width: 100vw;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
}

#b {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  padding: 50px;
}

#c {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
  display: flex;
  list-style: none;
}

li {
  flex: 1 0 auto;
  /* width: 100%; */
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}

<div id="a">
  <div id="b">
    <ul id="c">
      <li>foo</li>
      <li>hello</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
    </ul>
  </div>
</div>

See updated fiddle

I tested it in iphone 6, IOS 10.3