Currently, I'm working on a project that seems to require a lot of nested flexboxes on the HTML/CSS side. Up until this point I've worked with one flexbox parent and a set of nested flexbox children (the children only containing nodes that have a fixed height). The result is that, if you flex-wrap: wrap the parent flexbox, the height of the entire system (that is, of the parent) is determined by the nested children. With this example code:
.parent { width: 60px; background-color: gray; display: flex; flex-wrap: wrap;}.child { display: flex; flex-direction: column; margin: 5px; background-color: pink;}.childcontent { flex: 0 0 20px; width: 20px;}<div class="parent"><div class="child"> <div class="childcontent"></div> </div><div class="child"> <div class="childcontent"></div> </div></div>You get this result:
And let's say I wanted to add one more <div class="child"></div> element as a child of the parent, the parent flexbox would wrap that onto a new line. Again the size of this new child is determined by .childcontent, (which in my project is actually several elements, each with absolutely fixed flex-basis, but are each subject to change or be different from each other). But we see that the total height of the parent is determined exclusively by the height of the children. It is exactly the sum total of the largest height for each row plus the top and bottom of each row's largest margin. The children remain the height specified by their content's flex property, and they determine the height of the parent, not vice versa:
Now my project has gotten to be more complex. To the left of .parent , I now need to add an element of fixed height and fixed width. In order to keep this to the left of .parent, the only method I can think is to use a wrapping flexbox that specifies that these elements to belong to a row. Let's say I want this new fixed-size element, .sibling, to be 100px tall and 20px wide. I'd then update my code to the following:
.wrapper { width: 160px; background-color: red; display: flex;}.sibling { background-color: aquamarine; flex: 0 0 20px; height: 100px;}.parent { width: 60px; background-color: gray; display: flex; flex-wrap: wrap;}.child { display: flex; flex-direction: column; margin: 5px; background-color: pink;}.childcontent { flex: 0 0 20px; width: 20px;}<div class="wrapper"><div class="sibling"></div><div class="parent"><div class="child"> <div class="childcontent"></div> </div><div class="child"> <div class="childcontent"></div> </div><div class="child"> <div class="childcontent"></div> </div></div></div>Ideally, the result would look like one of the two following:
or 
Instead, it looks like this. The .parent flexbox has been stretched to match the 100px height of it's sibling, as has all of it's .child elements:
This on it's own is fine, but despite the fact that .childcontent limits the maximum size of it's flex-basis to 20px , it's stretching out to 40px high per .child item. I would like each .child item to retain the height it had previously, as determined by .childcontent . Instead, it's stretching out a meaningless extra 20px beyond it's last (in this case, only) piece of content. The main catch here is I would like to do this WITHOUT any sort of absolute positioning or height altering. As I mentioned, in my actual code, .childcontent represents a set of several possible elements. I'd like to be able to directly change the properties of those elements individually and have it reflect in the height of .childwithout having to change the size of .child or any other extra absolute positioning in other elements.
As long as the code I have looks like one of those "ideally" photos I posted, and no absolute positioning is used in any ancestor of .childcontent - I'm fine with any fix to this. Even if that fix involves not using display: flex in .wrapper , for example.