Filling space horizontally inside container

I have a container that contains two elements: a search bar, and a table under it. Inside the table, I have a sidebar to the left and some content to the right. The container has fixed height, and I want the sidebar and content to fill the space vertically.

I can get the table to fill the space, but not the sidebar and the content. This is the closest I can get:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
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;
}
.projects-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;
}
.projects-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;
}
.projects-table .search img {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.25rem;
}
.projects-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;
}
.projects-table .projects-content .sidebar {
width: 10%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
margin: 0.5rem;
}
.projects-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;
}
.projects-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;
}

<!-- language: lang-html -->

 <div class="projects-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>

<!-- end snippet -->

You can try to set flexbox align-items:stretch and flex-grow:1 properties:

.projects-table .projects-content {
align-items: stretch;
}
.projects-table .projects-content .content {
flex-grow: 1;
}

All you need to do is to give the content items a flex-grow: 1

.projects-table .projects-content .sidebar p {
flex-grow: 1;
...
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
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;
}
.projects-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;
}
.projects-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;
}
.projects-table .search img {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.25rem;
}
.projects-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;
}
.projects-table .projects-content .sidebar {
width: 10%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
margin: 0.5rem;
}
.projects-table .projects-content .sidebar p {
flex-grow: 1;
border-style: solid;
border-width: 0.1rem;
border-radius: 0.5rem;
margin-top: 0;
margin-bottom: 0.5rem;
padding: 1rem;
}
.projects-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;
}

<!-- language: lang-html -->

<div class="projects-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>

<!-- end snippet -->

Here is a bit of an alternate way to do what you are doing. I find using something like this makes long-term maintenance easier and individual "block" styling easier to understand without complex positioning.

I find that using a grid with grids IN it makes complex layout easier. Note here I used some grid-areas names just to make things clear what was where; some ugly styling just to show what is where etc.

• using a grid for the "page" to account for that prior large 5em margin that MGIHT be for some content? avoids some weird fix positioning and sizing challenges if so
• adding some div wrappers for "containers"
• used "container" to help describe layout vs visual styles for each container block

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
font-family: "Poppins", sans-serif;
}
body {
background-color: #000000;
color: aliceblue;
margin: 0;
padding: 0;
font-size: 16px;
box-sizing: border-box;
}
.page-container {
background-color: #404040;
display: grid;
grid-template-columns: 1fr;
/* the 5em nothingyet is the prior 5em margin but allows content to be in that row if needed */
grid-template-rows: 5em auto;
grid-template-areas: 
"nothingyet" 
"projectthings";
}
.project-container {
grid-area: projectthings;
background-color: #004020;
/* tell the this container to be that auto row */
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 5em auto;
grid-template-areas: 
"searchc"
"contentc";
height: 20rem;
}
.search-container {
grid-area: searchc;
display: grid;
grid-template-rows: afr;
grid-template-columns: 1.25em auto;
/* this 0.25em was padding before but really is a "gap" between image and h1 */
grid-gap: 0.25em;
grid-template-areas: "imgc searchy";
align-items: center;
border-bottom: solid;
border-width: 0.1rem;
border-color: #7FFF00;
opacity: 0.25;
color: white;
}
.content-contaIner {
grid-area: contentc;
background-color: #FF0080;
display: grid;
grid-template-columns: 10% auto;
grid-template-rows: 20em;
grid-template-areas: "sidebar content";
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.image-container {
grid-area: imgc;
height: 1.25em;
}
.search-search {
grid-area: searchy;
}
/* below here is just the styling from before mostly - see inline comments */
.projects-table {
border-style: solid;
border-radius: 1rem;
border-width: 0.25rem;
border-color: slategrey;
}
/* moved to the search-container grid definition
.projects-table .search img {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.25rem;
}
*/
.projects-table .search .image-container img {
/* depends on image and use intent really */
height: 100%;
width: 100%;
border: solid yellow 3px;
}
.projects-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;
}
.projects-table .projects-content .sidebar {
/* moved to content-container css
width: 10%;
height: 100%;
*/
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
margin: 0.5rem;
}
.projects-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;
}
.projects-table .projects-content .content {
/* moved to content-container css as auto
width: 100%;
height: 100%;
*/
margin: 0.5rem 1rem 0.5rem 1rem;
border-style: solid;
border-width: 0.1rem;
border-radius: 0.5rem;
padding: 1rem;
}
/* can be whatever but just to show it is contained in the container block allocated to it */
.content{width:100%;}

<!-- language: lang-html -->

<div class="page-container">
<div class="projects-table project-container">
<div class="search search-container">
<div class="image-container">
<!-- might not seem to line up but the alt text IMG is bigger than the 1.25em -->
<img src="" alt="IMG">
</div>
<div class="search-search">
<h3>Search...</h3>
</div>
</div>
<div class="projects-content content-container">
<div class="sidebar">
<p>Sidebar</p>
<p>Sidebar</p>
</div>
<p class="content">content</p>
</div>
</div>
</div>

<!-- end snippet -->