为什么这些 flex 项目不包装？

Question

我有一个弹性项目也是一个弹性容器 .sub-con，问题是 .sub-con 的弹性项目拒绝换行，即使在添加之后也是如此：flex-flow: row wrap.

谁能帮我解决这个问题，或者指出我做错了什么。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  height: 100vh;
}

.sub-con {
  margin-right: 50px;
  margin-left: 50px;
  height: 500px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.col-one {
  height: 100px;
  border: 1px solid lightgreen;
  flex-grow: 2;
}

.col-two {
  height: 100px;
  border: 1px solid red;
  flex-grow: 1;
}

<div class="container">
  <div class="sub-con">
    <div class="col-one"></div>
    <div class="col-two"></div>
  </div>
</div>

Answer 1

嵌套容器中的弹性项目的大小为 百分比。

.col-one{
  width: 40%;
  height: 100px;
  border: 1px solid lightgreen;
}
.col-two{
  width: 40%;
  height: 100px;
  border: 1px solid red;
}

因为百分比长度是基于父项的长度，所以它们没有理由换行。它们将始终是父级的 40%，即使父级的宽度为 1%。

如果您使用其他长度单位，例如 px 或 em，它们将换行。

jsFiddle demo

 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: row wrap;
   height: 100vh;
 }
 
 .sub-con {
   flex: 1;  /* for demo only */
   align-content: flex-start; /* for demo only */
   margin-right: 50px;
   margin-left: 50px;
   height: 500px;
   background-color: #fff;
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
 }
 
 .col-one {
   width: 200px;
   height: 100px;
   border: 1px solid lightgreen;
 }
 
 .col-two {
   width: 200px;
   height: 100px;
   border: 1px solid red;
 }

<div class="container">
  <div class="sub-con">
    <div class="col-one"></div>
    <div class="col-two"></div>
  </div>
</div>

为什么这些 flex 项目不包装？

Why is these flex items not wrapping?

html

css

word-wrap

flexbox