I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space.
I intentionally refrained from fixing too many widths/heights in order to allow the page to dynamically adjust based on content (for example, the main content area is designed to fill 100% height using flexbox).
Below is the stripped-down version of my code:
<html>
<head>
<style>
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*
{
font-family: Arial !important;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
overflow-x: hidden;
}
.fill-area-content
{
flex: 1; /* same as flex: 1 1 auto; */
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<div class="flexbox-parent">
<div style="width: 100%; display: block;">
<div style="text-align: right; background-color: #666666;">
TOP
</div>
<div style="border: #000000 thin solid; width: 162px; text-align: center; padding: 10px; margin: 10px; float: left;">
LEFT
AREA
</div>
<div class="fill-area-content" style="border: #000000 thin solid; text-align: center; padding: 10px; margin: 10px; ">
<div style="float: left; ">
<div>
<div style="display: inline-block; background-color: green">
SOMETHING
</div>
</div>
</div>
<div style="float: left; padding-left: 5px; padding-right: 5px; text-align: right; background-color: orange">
SOMETHING
</div>
<div style="float: left; padding-left: 5px; padding-right: 5px; background-color: red ">
<textarea rows="12" id="notes" cols="35" >
NEEDS TO BE 100% OF THE REST OF SCREEN
</textarea>
</div>
</div>
</div>
<div class="fill-area-content" style="background-color: #ffffff">
MAIN CONTENT<br>
MAIN CONTENT<br>
MAIN CONTENT<br>
MAIN CONTENT<br>
MAIN CONTENT<br>
MAIN CONTENT<br>
MAIN CONTENT<br>
</div>
</div>
</body>
</html>
If anyone has a solution or advice to offer, I would greatly appreciate it as this issue is starting to drive me crazy.