Nested flexbox items shrink differently

In a nested flexbox, I want to make two elements (.a in the inner flexbox and .c in the outer flexbox) 700px wide if space is available, and shrink otherwise.

They have the same flex-shrink value of 1, but they end up having different sizes. How can I make them shrink equally?

.a {  width: 700px; /* flex-basis doesn't work */}.b {  min-width: fit-content;}.c {  flex: 1 1 700px;}.flex {  display: flex;}div {  min-width: 0;  outline: 1px solid black;}

<div class="outer flex"><div class="inner flex"><div class="a"> a </div><div class="b"> bbbbbbbbbbbbbbbbbbbb </div></div><div class="c"> c </div></div>

The reasons why the flexboxes should be nested are omitted for simplicity. For example, the inner flexbox should have position: relative and a child with position: absolute; left: ...; right: ...