CSS grow child to parent's max width - html

Question

There are plenty of questions on how to make a parent's width that of it's child that are suggested as similar questions, this is not what I want.
I am working on theming a piece of software for branding purposes, I do not control the software and only have access to CSS modifications, so JavaScript or modifying the DOM is out of the question or this would be trivial.
Using CSS only, is it possible to achieve the following.
I have a container div that holds two columns, the main content area, and a sidebar. The sidebar contains multiple divs that wrap content for different sidebar elements. The content of these sidebar elements are designed to be scaled to 100% width of it's parent, which works when the parent has a fixed width, which is by default 25% of the container.
What we need is for the sidebar to disappear when it's content is hidden. The content within each sidebar element can be set to display: none, but when all the elements are hidden the sidebar still takes up empty space. The example below using a min-width: fit-content and a max width of the 25% which was previously it's fixed size, which works fine for hiding the sidebar when the content is hidden, but the content in the sidebar doesn't grow. Is there a way to make the content inside of .sidebarElementWrapper below, grow to fit the max-width of #sidebarArea
* {
margin: 0;
box-sizing: border-box;
}
#container {
height: 100%;
display: flex;
flex-direction: row;
}
#contentArea {
width: 100%;
background: #A84652;
}
#sidebarArea {
max-width: 25%;
min-width: fit-content;
background: #4262C2;
}
.sidebarElement {
width: 100%;
padding: 12px;
background: #8b8b8b;
border-bottom: 1px solid #2c2c2c;
}
<div id="container">
<div id="contentArea">
</div>
<div id="sidebarArea">
<div class="sidebarElementWrapper">
<div class="sidebarElement">Sidebar Element 1</div>
</div>
<div class="sidebarElementWrapper">
<div class="sidebarElement">Sidebar Element 2</div>
</div>
</div>
</div>
To hide the content of a sidebar element, the .sidebarElement is set to display: none, not the wrapper, just of note. Since the wrapper still exists, and the content isn't removed, just hidden, the :empty pseudo-selector also doesn't work.
Edit: Just to clarify as I don't think it was clear after reading through this again, when the content is hidden the sidebar should be gone, doesn't matter how whether it's through display:none or width or some other mechanism. When there is sidebar content it should be 25% the width of the container.
Edit again: Because of some comments, I'm going to attempt to explain this again.
The sidebar has a min and max width, it does not have a fixed width, the sidebar will scale to fit the content inside it. Because the sidebar does not have a fixed width, elements basing their width on 100% of the parent do not act like you may expect, instead the sidebar is defaulting to the min-width from what I can tell, which is the minimum width required to fit the content. I am not looking for this, I want the sidebar to extend out to 25% of the container width, which you can see if you copy this code into a file (because the snippet above will run in a smaller pane it may actually be wider than 25% so it may not be representative)
* {
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#container {
height: 100%;
display: flex;
flex-direction: row;
}
#contentArea {
width: 100%;
background: #A84652;
}
#sidebarArea {
max-width: 25%;
min-width: fit-content;
background: #4262C2;
}
.sidebarElement {
width: 100%;
padding: 12px;
background: #8b8b8b;
border-bottom: 1px solid #2c2c2c;
}
<div id="container">
<div id="contentArea">
</div>
<div id="sidebarArea">
<div class="sidebarElementWrapper">
<div class="sidebarElement">Sidebar Element 1</div>
</div>
<div class="sidebarElementWrapper">
<div class="sidebarElement">Sidebar Element 2</div>
</div>
</div>
</div>
In the end, I have a div with a min and max width, and a child element using a percent. The percent width (ie. width:100%) does not scale the child to the element's max width, but 100% of the current width, so no, the code as above does not achieve what I need.

Answer 1

I found a way to do it, fill-available.
.sidebarElement {
width: 100vw;
...
max-width: fill-available;
max-width: stretch;
max-width: -webkit-fill-available;
max-width: -moz-available;
}
Once this is done, the min-width on #sidebarArea can be removed.
* {
margin: 0;
box-sizing: border-box;
}
html,body {
width: 100%;
height: 100%;
}
#container {
height: 100%;
display: flex;
flex-direction: row;
}
#contentArea {
width: 100%;
background: #A84652;
}
#sidebarArea {
max-width: 25%;
background: #4262C2;
}
.sidebarElement {
width: 100vw;
padding: 12px;
background: #8b8b8b;
border-bottom: 1px solid #2c2c2c;
max-width: fill-available;
max-width: stretch;
max-width: -webkit-fill-available;
max-width: -moz-available;
}
<body>
<div id="container">
<div id="contentArea">
</div>
<div id="sidebarArea">
<div class="sidebarElementWrapper">
<div class="sidebarElement">Sidebar Element 1</div>
</div>
<div class="sidebarElementWrapper">
<div class="sidebarElement">Sidebar Element 2</div>
</div>
</div>
</div>
</body>