2

I thought that height: max-content might do the trick but it didn't. I don't want to fix this by adding another div. Is there a way to do this by using parent and only 3 child elements?

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

.item {
  flex-basis: 54%;
  background: #000;
  margin: 1px;
  height: max-content;
}

.item.itm1 {
  flex-basis: 44%;
  height: 100px;
}
<div class="container">
  <div class="item itm1">1</div>
  <div class="item itm2">2</div>
  <div class="item itm3">3</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ali Ahmed
  • 31
  • 3
  • 1
    Does it have to be `display: flex` or could you use `display: grid`? Flex isn't really meant for doing that unless you use multiple flex box containers. – Steven Lambert May 07 '20 at 02:38
  • I think you should just make them in two parts,first "div" in the first part and the rest in the second part, just like that – A. El-zahaby May 07 '20 at 02:49
  • @StevenLambert not necessarily but I needed expert's opinion as I wasn't sure that it is impossible in flex. – Ali Ahmed May 07 '20 at 10:25
  • @A.El-zahaby It does works but I am willing to achieve it with fewer divs... – Ali Ahmed May 07 '20 at 10:26

1 Answers1

1

In my opinion I don think it is possible with help of "flex" you can achieve what you want.if you okay to use one more "div", it is possible, here is the code snippet for that.

<div class="container">
    <div class="item itm1">1</div>
    <div style="display: flex;flex-direction: column;width:55%">
        <div class="item itm2">2</div>
        <div class="item itm3">3</div>
    </div>
</div>
Deepak Singh
  • 116
  • 1
  • 1
  • 10