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

如果您将 flex 设置为 1 1 auto（允许自动增长、收缩和设置基本宽度的简写），这也适用于早期 iOS 版本（10、11）上的 Safari，并删除 @987654323来自li 的@ 属性。在运行 iOS 10 到 12 的多台设备上进行了测试。JSFiddle sn-p 可用here。

更新的 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>