Flex-Wrap: Wrap не работает на мобильных iOS

Question

У меня есть это, что отлично работает на моем ноутбуке, но не на мобильных 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>

Тем не менее, на мобильном устройстве оно имеет значение в несколько строк, но в основном оно переполняется вправо.Как будто в нем будет 2 или 3 строки, а затем 15 или 20 элементов в строке (когда на экране помещается только 2 или 3 элемента).Я не смог заставить его работать, так как у меня нет хорошей системы для отладки на мобильном телефоне.

Answer 1

Обновление стиля на li.Измените flex: 1; на flex: 1 0 auto; и удалите 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>

См. Обновленный fiddle

Я тестировал его в iphone 6, IOS 10.3

Answer 2

Это будет работать для Safari и в более ранних версиях iOS (10, 11), если вы установите flex на 1 1 auto (сокращение для автоматического увеличения, уменьшения и установки ширины основы) и удалите width: 100% собственность от li.Протестировано на нескольких устройствах под управлением iOS 10-12. Фрагмент JSFiddle доступен здесь .

Обновлен CSS:

* {
  /* 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;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
  background: cyan;
}

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

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

li {
  flex: 1 1 auto;
  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;
  /* Use max-width for testing purposes */
  /*max-width: 25%;.*/
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
  background: cyan;
}

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

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

li {
  flex: 1 1 auto;
  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>