CSS Flexbox 以 % 宽度包装项目

Question

I have flexbox with 2 elements. First element width is 40% of flexbox, second is 60%. I want to wrap second element when it's width is below 600px, but if the second element is wraped I want to both elements width to 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>

Answer 1

Try below code

 .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>