CSS Flexbox 以 % 宽度包裹项目答案

【问题标题】：CSS Flexbox wrap item with % widthCSS Flexbox 以 % 宽度包裹项目
【发布时间】：2020-11-13 02:12:56
【问题描述】：

我有 2 个元素的 flexbox。第一个元素宽度是 flexbox 的 40%，第二个是 60%。我想在第二个元素的宽度低于 600px 时包装它，但如果第二个元素被包装我希望两个元素的宽度都为 100%

<div style="display: flex; flex-wrap: wrap; align-items: center;">
  <div id="text1-container" class="text-container" style="flex: 4 0 40%">
    <div id="text1" class="hide-left">
      <p></p>
    </div>
  </div>
  <div style="min-width: 600px; flex: 6 0 60%">
    <img src="" style="width: 100%;">
  </div>
</div>

【问题讨论】：

媒体查询可能是一种解决方法。 Tbh，我不知道纯 flex 的快速解决方案

标签： html css flexbox width

【解决方案1】：

试试下面的代码

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child1 {
  background-color: red;
  flex: 1 1 40%;
}

.child2 {
  flex: 1 1 max(60%, 600px);
  background-color: blue;
}

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

【讨论】：