Question

问题是左侧div中的项目开始早于必要时换行（左侧div仍有缩小的空间）。

内部flexbox应该只在外部flexbox包装后进行包装 - 只要外部flexbox仍有空间，内部flexbox不应该换行，外部flexbox应该收缩。

我尝试将.b_row宽度设为100％，但这不起作用。

＆＃13;

.m {
  display: flex;
  flex-wrap: wrap;
}
.l_1 {
  background-color: red;
  flex: 1;
  padding: 15px;
  margin-left: auto;
  margin-right: auto;
}
.r_1 {
  background-color: yellow;
  flex: 1;
  padding: 25px;
  margin-left: auto;
  margin-right: auto;
}
.b_1 {
  padding: 15px;
  border-radius: 4px;
}
.b_row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.b_item {
  flex: 1;
}

＆＃13;

<div class=m>
  <div class=l_1>
    <div class=b_1>
      Left text
      <div class=b_row>
        <div class=b_item>Item 1
          <br>
          <input class=datepicker type=text size=10>
        </div>
        <div class=b_item>Item 2
          <br>
          <input class=datepicker type=text size=10>
        </div>
      </div>
    </div>
   </div>
  <div class=r_1>Right Item</div>
</div>

＆＃13;

Answer 1

考虑使用媒体查询来控制内部Flex容器的包装行为。

而不是：

.b_row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

尝试以下几点：

.b_row {
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
}

@media ( max-width: 300px ) {
   .b_row { flex-wrap: wrap; }
}

revised fiddle

在主要和嵌套的Flex容器之间设置包装优先级

1 个答案: