Here is a codepen. Pay attention to the purple elements when you change the view height. They overflow. I want to slay this dragon once and for all - and more importantly - understand what is happening so I never have to bother you folks again.
https://codepen.io/colbisaurusrex/pen/WpXVxY
body {
background-color: #34495E;
padding: 5%;
}
.container {
height: 100vh;
display: flex;
}
.columnleft {
background-color: #2ECC71;
height: 100%;
width: 30%;
margin-right: 10%;
}
.leftbox {
margin: 10%;
height: 100%;
}
.box {
display: flex;
background-color: #1ABC9C;
margin: 10%;
height: 40%;
}
.innerbox {
background-color: #3498DB;
height: 96%;
width: 47%;
margin: 2%;
}
.columnright {
background-color: #2ECC71;
height: 100%;
width: 60%;
}
.row {
display: flex;
height: 40%;
background-color: #9B59B6;
width: 80%;
margin-right: 10%;
margin-left: 10%;
}
.rowone {
margin-top: 5%;
margin-bottom: 5%;
}
.rowtwo {
margin-bottom: 5%;
}
Ok so as I see in your code, you are using flex buuut... not really.
I corrected your columnright but you can do the same with columnleft if you understood.
What you want to achieve is having elements inside column with the same "height" and take the full space.
So here is the corrected CSS :
.columnright {
background-color: #2ECC71;
height: 100%;
width: 60%;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex: 1;
background-color: #9B59B6;
width: 80%;
margin-right: 10%;
margin-left: 10%;
margin-top: 20px;
}
.rowtwo {
margin-bottom: 20px;
}
Remove everything from rowone.
What I used is the flex property that define how much space an element will take. Here, each element will have to take 1 unit of space, so each one the same amount of height. I also added a margin-top to each element to create an "internal" padding and a margin-bottom to the last element.
Also, here is the corrected CodePen : https://codepen.io/anon/pen/vxpBjM
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments