我正在尝试让文本区域填充屏幕的剩余宽度。我已经很好地设置了一切，但似乎无法实施任何解决方案来使其进入屏幕的其余部分。
我故意尝试不固定所有页面的许多宽度/高度以动态适应某些内容（即主要内容区域旨在用弹性框填充 100% 高度）
我已经将我的代码剥离到布局基础知识：
<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>
感谢您的任何帮助，因为它让我发疯
我重新创建了你的布局，因为你的代码有点脏，难以理解。
*, *:before, *:after{
box-sizing: border-box;
}
.top{
text-align: right;
background: gray;
}
.flex-container{
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: 10px 0;
}
.left-area, .right-area{
border: 1px solid black;
padding: 10px 5px;
}
.left-area{
width: 18%;
text-align: center;
}
.right-area{
width: 78%;
}
.sm-1, .sm-2{
display: inline-block;
}
.sm-1{
background: green;
}
.sm-2{
background: yellow;
}
.textarea-container{
background:red;
padding: 5px 10px;
margin-top: 5px
}
.textarea-container textarea{
width: 100%;
}<div class="top">Top</div>
<div class="flex-container">
<div class="left-area">LEFT AREA</div>
<div class="right-area">
<div class="sm-1">Something</div>
<div class="sm-2">Something</div>
<div class="textarea-container">
<textarea cols="30" rows="10">Hello this is a texarea</textarea>
</div>
</div>
</div>