我有一个包含两个元素的容器:一个搜索栏，以及它下面的一个表.在表格内部，我在左边有一个侧边栏，在右边有一些内容.容器有固定的高度，我希望侧栏和内容垂直填充空间.
我可以让表格填满空间，但不能让边栏和内容填满.这是我能找到的最接近的了:
* {
font-family: "Poppins", sans-serif;
}
body {
background-size: 100%;
/*background-image: url('./images/diego-ph-5LOhydOtTKU-unsplash.jpg');*/
background-color: black;
background-repeat: "no-repeat";
background-position: 0 0;
color: aliceblue;
margin: 0;
padding: 0;
}
.projectlayui-table {
border-style: solid;
border-radius: 1rem;
border-width: 0.25rem;
border-color: slategrey;
margin-top: 5rem;
padding: 1rem;
height: 20rem;
display: flex;
flex-direction: column;
}
.projectlayui-table .search {
opacity: 0.25;
color: white;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
border-bottom: solid;
border-width: 0.1rem;
}
.projectlayui-table .search img {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.25rem;
}
.projectlayui-table .projects-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin-top: 1rem;
flex-grow: 1;
border-style: solid;
}
.projectlayui-table .projects-content .sidebar {
width: 10%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
margin: 0.5rem;
}
.projectlayui-table .projects-content .sidebar p {
border-style: solid;
border-width: 0.1rem;
border-radius: 0.5rem;
margin-top: 0;
margin-bottom: 0.5rem;
padding: 1rem;
}
.projectlayui-table .projects-content .content {
width: 100%;
height: 100%;
margin: 0.5rem 1rem 0.5rem 1rem;
border-style: solid;
border-width: 0.1rem;
border-radius: 0.5rem;
padding: 1rem;
} <div class="projectlayui-table">
<div class="search">
<h3>Search...</h3>
</div>
<div class="projects-content">
<div class="sidebar">
<p>Sidebar</p>
<p>Sidebar</p>
</div>
<p class="content">content</p>
</div>
</div>