CODEWITHSUNDEEP
htmlcssflexboxwidth
Oskar
Oskar

Reputation: 202

CSS Flexbox wrap item with % width

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>

Upvotes: 0

Views: 608

Answers (1)

Parth
Parth

Reputation: 151

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>

Upvotes: 2

Related Questions