I have been using flex-box for almost everything for quite some time, but there is still some small things with child sizing that I wasn't able to figure out. I am giving two examples:
.parent { display: flex; justify-content: center; align-items: center;}.child { display: flex; flex-wrap: wrap; background: blue;}.content { height: 100px; width: 100px; background: red;}<div class="parent"><div class="child"><div class="content"></div><div class="content"></div></div></div>I want to keep the .child as narrow as possible even when wrapping. Now when no content wraps it works fine, but when the viewport is smaller and second .content is wrapping, the .child is big as the .parent.
.parent { display: flex; justify-content: center; align-items: center;}.child { padding: 10px; display: flex; flex-direction: column;}.content { max-width: 200px; width: 100%; background: red;}<div class="parent"><div class="child"><div class="content"></div><div class="content"></div></div></div>And in this example I want to make .child as big to fit biggest version of .content as possible. I know that I can put max-width: 200px and width: 100% on .child rather then .content but some times this is not a choice.
So for CSS gurus out there, is this even possible with flex-box or some other strategy? How?