I want to ensure that the elements nav, #left, and #right always have the same height, with the text contained within each element and not overflowing.
<body>
<header>
Some text here
</header>
<main>
<nav>
Links go here
</nav>
<section id="content">
<div id="headline">
More Text
</div>
<div id="contentText">
<div id="left">
Left side content
</div>
<div id="right">
Right side content
</div>
</div>
</section>
</main>
</body>
This is my CSS:
header {
display: flex;
height: 60px;
width: 100%;
background-color: green;
}
#logo{
width: 15%;
background-color: red;
}
#messages{
width: 5%;
background-color: yellow;
}
#notifications{
width: 5%;
background-color: red;
}
#search{
width: 5%;
background-color: yellow;
}
#searchArea{
flex: 1;
background: red;
}
#profileArea{
width: 10%;
background: yellow;
}
#options{
width: 3%;
background: red;
}
main{
display: flex;
width: 100%;
height: calc(100% - 60px);
min-height: calc(100% - 60px);
background: blue;
}
nav {
width: 15%;
min-height: 100%;
background-color: green;
}
.link{
width: 100%;
height: 3%;
background-color: yellow;
}
#content{
display: flex;
flex-direction: column;
width: 85%;
height: 100%;
min-height: 100%;
background: grey;
}
#headline{
width: 100%;
height: 5%;
background-color: pink;
}
#contentText{
display: flex;
width: 100%;
height: 95%;
background: red;
}
#left{
width: 50%;
height: 100%;
background: red;
}
#right{
width: 50%;
height: 100%;
background: yellow;
}
For more details, you can visit my JsFiddle page