After implementing the following CSS/HTML code, I achieved my desired outcome - three boxes displayed in a row. The middle box has a fixed width while the outer boxes expand equally on either side:
#container {
display: flex;
}
#container > * {
background: #efefef;
}
#container .fixed-width-40px {
width: 40px;
background: #ccc;
}
.fill-available-horizontal-space {
flex-grow: 1;
}
<div id="container">
<div class="fill-available-horizontal-space">aaa</div>
<div class="fixed-width-40px">bbb</div>
<div class="fill-available-horizontal-space">ccc</div>
</div>
However, when I added a form (including a text input field) to the third box, the width of the third box increased and the first box decreased.
I am looking for a solution where both the first and third boxes maintain equal widths, despite adding the new content.
Is there a way to fix this issue?
<div id="container">
<div class="fill-available-horizontal-space">aaa</div>
<div class="fixed-width-40px">bbb</div>
<div class="fill-available-horizontal-space">
<form>
<input type="text" name="test"/>
</form>
</div>
</div>