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（允许自动增加，缩小和设置基础宽度的简写形式），然后删除width: 100%中的li个属性。在运行iOS 10到12的多台设备上进行了测试。here提供了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>

flex-wrap：包装不能在移动iOS上使用

2 个答案: