Just starting to work with flexbox and I'm puzzled about why the two divs on the right aren't taking up all the height space.
My goal is to have a large column on the left, while the right column is split into two rows.
CSS:
.card {
display: -webkit-flex;
display: flex;
margin:8% auto auto auto;
width:450px;
height: 150px;
min-height: 100px;
color: black;
}
.left-tile {
flex: 3;
background: #02A0E5;
}
right-tile {
flex: 2 1 50%;
background: #FD6800;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.up-right-tile {
background: #D03324;
flex: 2;
}
.low-right-tile {
background: #FD6800;
flex: 2;
}
HTML
.container
.card
.left-tile
.card-content
.quote-content
....
.right-tile
.up-right-tile
.twitter-button
....
.low-right-tile
.new-quote
....
You can view the actual code pen code here.