The behavior I'm trying to get is that when the screen size changes and the flex elements wrap inside the parent element, then the parent element adapts its width to fit the contents. I'm not quite sure if there is any setup where it's possible at all in CSS but if there is, can anyone point that out?
The green element .wrapper is the parent that I want to adapt to the content but when I set its width to fit-content it is still filling the container's width. I've already tried many combinations such as width: max-content with max-width: 100% but those do not work either.
*{ margin: 0; padding: 0; box-sizing: border-box;}body{ background: #222; display: flex; align-items: center; justify-content: center; height: 100vh;}.full{ width: 100%; height: 90vh; background: #eee;}.limited{ max-width: 90vw; background: #f4f4f5; display: flex; flex-direction: row; gap: 30px; height: 100%; align-items: center; margin: auto;}.column1{ background: teal; width: 200px; height: 100%; flex-shrink: 0;}.column2{ background: turquoise; height: 100%; width: 100%;}.wrapper{ display: flex; flex-wrap: wrap; gap: 5px; background: forestgreen; width: fit-content;}.el{ width: 200px; height: 100px; background: crimson; flex-shrink: 0;}<div class="full"><div class="limited"><div class="column1"></div><div class="column2"><div class="wrapper"><div class="el"></div><div class="el"></div><div class="el"></div><div class="el"></div></div></div></div></div>There is a codepen here.