How can I do this 3 div layout using flexbox?

Question

I'm trying to create a 3 div layout like this:

So that I could then place an image inside the left div, then place 1 paragraph inside the top right div and 1 paragraph in the bottom right div.

I'm having some trouble figuring how to do this using flexbox. The way I see it I would need like 5 divs and something like this.

<div class='flexbox'>
    <div class='container-one'></div>
    <div class='container-two'>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
    </div>
</div>

.flexbox {
    display: flex;
}
.container-one {
    flex: 1;
}
.container-two {
    flex: 4;
    display: flex;
    flex-direction: column
}

Would that be the correct way of doing this? It does use quite a lot of divs and maybe it could be done with less.

no need to nest the `p` inside `div` and it should be good – Temani Afif Dec 19 '18 at 01:30 — Temani Afif, Dec 19 '18 at 01:30
As in the 2 divs without classes should not exists at all? – Onyx Dec 19 '18 at 01:33 — Onyx, Dec 19 '18 at 01:33
yes, they are useless in this case – Temani Afif Dec 19 '18 at 01:34 — Temani Afif, Dec 19 '18 at 01:34
I think you can do this with grid in no time. – Francisco Arleo Dec 19 '18 at 02:26 — Francisco Arleo, Dec 19 '18 at 02:26

score 1 · Accepted Answer · answered Dec 19 '18 at 02:50

You don't really need too much containers.

.flexbox {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  background: #0c8ec4;
  height: 60vh;
  padding: 1rem 0 0 1rem;
}

.flexbox div:first-child {
  min-width: 20%;
  flex: 1 0 65%;
}

.flexbox div,
.flexbox div:last-child {
  flex: 1 0 25%;
  min-width: 70%;
  background: #fff;
  margin: 0 1rem 1rem 0;
}

<div class='flexbox'>
  <div></div>
  <div></div>
  <div></div>
</div>

score 0 · Answer 2 · answered Dec 19 '18 at 01:42

you can do something of this sort

.flexbox{

border:1px solid black;
width:300px;
height:300px;
display:flex;
}

.container-one {
width:40%;
border-right:1px solid black;
}

.container-two {
width:100%;
 display:flex;
 flex-direction:column;

}

.container-two div{
  
   height:50%;
    
}

.container-two div:first-child{
   border-bottom:1px solid black;
}

<div class='flexbox'>
    <div class='container-one'></div>
    <div class='container-two'>
        <div>
            
        </div>
        <div>
           
        </div>
    </div>
</div>

How can I do this 3 div layout using flexbox?

2 Answers2