I am facing some trouble in implementing the layout of a page that I am working on. I have attached a screenshot of the desired layout. The main element is the box in the bottom right showing tab-content and header; I want that box to take 50% of the visible right half.
This is the code snippet showing what I am attempting.
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
background: lightcoral;
height: 50px;
}
.main {
background: blue;
flex: 1;
}
.page {
height: 100%;
background: white;
display: flex;
flex-direction: column;
}
.page-header {
height: 50px;
background: yellow;
}
.page-content {
background: lightgoldenrodyellow;
flex: 1;
display: flex;
}
.element1 {
background: lightgreen;
width: 50%;
height: 100%
max-height: 100%;
overflow-y: auto;
}
.element-1-content {
height: 1000px;
}
.element2 {
width: 50%;
background: lightblue;
display: flex;
height: 50%;
flex-direction: column;
}
.tab {
background: lightslategrey;
height: 20px;
}
.tab-content {
flex: 1;
background: lightpink;
}
<header class="header">
<p>
some header
</p>
</header>
<main class="main">
<div class="page">
<header class="page-header">
<p>
page header
</p>
</header>
<main class="page-content">
<div class="element1">
<div class="element-1-content">
Element 1 content
</div>
</div>
<div class="element2">
<div class="tab">
tab header
</div>
<div class="tab-content">
tab content
</div>
</div>
</main>
</div>
</main>