Flexbox - Size of "div" based on other "div"s

I have the following HTML code:

<div class="page"> <div class="title">VENIAM DEBITIS PERFERENDIS</div> <div class="content"> <div class="part-a"> <div>Lorem ipsum dolor sit amet</div> <div>consectetur adipisicing elit. Quam vel ex, harum asperiores, nemo.</div> <div>recusandae placeat, iure est totam cumque</div> </div> <div class="part-b"> <div>iste temporibus illo</div> <div>Incidunt a nam recusandae deleniti aliquid iure</div> <div>repellat delectus fugiat, rerum sed consectetur id</div> </div> </div> </div>

And this CSS Code :

.page { display: flex; flex-direction: column; } .title { background-color: cornflowerblue; } .content { display: flex; } .part-a { background-color: #BEEECE; } .part-b { background-color: #EEDBBE; }

And I would like the width of the div containing the title to match the width of the two divs below it. I tried many things and I managed to get the rendering by adding width: max-content; to the page class. But by doing that I lose the automatic shrinking of the divs below if I change the resolution.

Is there a trick to keeping this structure, or do I need to use a "grid"...?

what I would like