Change the wrap priority between parent and child

Question

I have a page like this

+---------+-------------------+
|         | +-------+-------+ |
|    A    | |  B    |   C   | |
|         | +---------------+ |
+---------+-------------------+

The main and sub containers are declared as flex wrapping elements


.main{
    display: flex;
    flex-wrap: wrap;
}

.main .sub{
    display: flex;
    flex-wrap: wrap;
}

When the page get smaller the main element wrap before the sub element

+-------------------+
|                   |
|         A         |
|                   | 
+-------------------+
| +-------+-------+ |
| |  B    |   C   | |
| +---------------+ |
+-------------------+

But I would like the sub element to wrap before the main to get

+-------------------+----------+
|                   | +------+ |
|                   | |  B   | |
|         A         | +------+ |
|                   | |  C   | |
|                   | +------+ |
+-------------------+----------+

I would like to change this behaviours to give the wrapping priority to the sub element.

user_1098851 · Answer

You could achive this behaviour by setting flex-wrap: wrap and a flex-basis (test the snippet as a full-page).

div {
   outline: 1px #ccc  dashed;
   padding: 20px;
   flex: 1 1 200px;
}

div.sub {
   flex-basis: 75px;
}



.flex {
   display: flex;
   flex-flow: row wrap;
}

Change the wrap priority between parent and child

1 Answers