1

This question is similar to Flex box with wrap inside another Flex box, but no solution was found.

Here's the structure:

<div> // flex wrapper
    <div></div> // flex: 1 1 80%;
    <div></div> // flex: 1 1 20%;
</div>

The wrapper's second child also contains children, and this child also has flex-wrap: wrap; applied to it. The problem is that it isn't expanding as you'd expect given flex: 1 1 20%; when more children are added than will fit in its current width.

You can see this behavior in this fiddle by clicking the "More" button until the second child's children overflows. Here's a screenshot:

Problem Screenshot

How can the second child be made to continue expanding when more grandchildren are added?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80

0 Answers0