Responsively size an inner container within limits

maybe it's just too late on a Friday but I can't get this fixed and can't find an example and I feel like I'm going in circles.

I have a row of three containers: A, B and C, where B is a wrapper for two containers, also in a row: B1 and B2. Visually, B adds nothing, so it just looks like a row of four containers: A, B1, B2 and C. This setup can't be changed, because B is an Angular component which I'm not going to tear apart, but I can add all kinds css to it.

Containers A, B1 and C are fixed in size and should stay the same width. Container B2 should scale depending on the available space to a minimum of the content size, and a maximum of a given width. Container B2 can be hidden, and then the view should becomes A, B1, C, snugly left aligned without a gap.

Here is a runnable example, where B2 unfortunately does not change in size. How do I make B2 change in size dynamically, from as small as B2-content, to the maximum of 200px?

div {  box-sizing: border-box;  height: 100%;  background-color: aqua;  border: solid 5px;}.container {  display: flex;  border: none;  height: 100px;  background-color: aquamarine;}.A {  min-width: 100px;}.B {  border: none;  display: flex;  width: fit-content;}.B1 {  min-width: 50px;}.B2 {  width: 200px;  max-width: 200px;  background-color: burlywood;}.B2-content {  height: 50px;  min-width: 100px;  width: 100px;  background-color: red;}.C {  min-width: 100px;}

<div class="container"><div class="A">A</div><div class="B"><div class="B1">B1</div><div *ngIf="showB2" class="B2">      B2<div class="B2-content">B2 content</div></div></div><div class="C">C</div></div>