CSS Dynamic Div Size Solution - html

Question

Inner divs need to resize related to the outer. But in the result, outer div's border is smaller than the inners total height. Also scroll middles are expected to resize 100% auto related to left, right, top and bottom. But they are resizing related to the outer div. What is the problem here? And do you think there is a better solution for this implementation?
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: 100%;
background-color: blue;
}
.window_inner {
background-color: red;
width: 100%;
height: 100%;
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: 100%;
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: 100%;
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>

Answer 1

Although, I could not completely understand your question but if I am right, you need some logic with css3 calc() rule in your middle divs. Please check my below code for reference.
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: calc(100% - 40px);
background-color: blue;
}
.window_inner {
background-color: red;
width: calc(100% - 20px);
height: calc(100% - 40px);
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: calc(100% - 40px);
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: calc(100% - 40px);
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>
Hope this help