Two divs (one with absolute height, the other with scrollbar) - html

Question

I want to have the following website style:
The current styles of "OTHER DIV" AND "MOTHER DIV" are displayed in the picture. How do I have to style the other divs like .div_top and .div_bottom so that I get only in .div_bottom a scrollbar if it's needed?
In addition I want that the scrollbar in .div_bottom adjusts itself when .div_top gets bigger (in height):
I think the height of .div_top has to be auto because there is a div inside .div_top which can be hidden and shown with jQuery.
#JonasLoerken
This is your second result. How can I fix this?

Answer 1

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
height: 100%;
flex-flow: row nowrap;
overflow: hidden;
}
.Aside {
width: 200px;
background-color: #333;
}
.Main {
flex: 1;
display: flex;
flex-flow: column nowrap;
}
.Main__header {
height: 40px;
min-height: 40px;
background-color: #777;
}
.Main__content {
overflow-y: auto;
}
<aside class="Aside">#Aside</aside>
<main class="Main">
<header class="Main__header">#Header</header>
<section class="Main__content">
<h1 class="Main__content-header">#Scroll</h1>
<p class="Main__content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</main>

Answer 2

Try this:
.wrapper {
height: 100%;
width: 100%;
}
.other-div {
width: 30%;
height: 500px /* User Percent */;
float:left;
background: orange;
display: block;
}
.mother-div {
height: 500px;
width: 70%;
float: right;
background: gray;
}
.top {
height: 30%;
width: 100%;
background: red;
}
.bottom {
height: 70%;
width: 100%;
background: green;
overflow-y: scroll;
overflow-x: hidden;
}
Try it out!