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