Place one div on the left side and two divs on the right with display flex

user_10121788 0
Viewed 408

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>

flexbox css html
1 Answers

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>
user_50988260
Related