CSS manage nested flexbox width by content priority - css

Question

I struggling with flexbox wrapping.
I have this 2 levels list:
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>
The HTML structure can be modified if its needed.
Base on wrapper width render should fit these rules:
mimic one list (same margin between all items);
The first item of all lists have to be visible;
but list-1 content has priority of list-2;
items only complete item can be visible in the list;
Render example:
1 A X
1 2 3 A X
1 2 3 4 5 6 7 8 9 A X
1 2 3 4 5 6 7 8 9 A B C D E F X
With my current achievement, I miss the priority wrapping (the both list get the same width and number of elements), and the spaces between items in both lists are not the same.
.wrapper {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.list div:not(:first-child) {
margin-left: 2px;
}
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
}
Any idea are welcome!

Answer 1

You can add flex-shrink:0 to the first list so it will never shrink and you will have your priority rule and add min-width:0 to the other list to allow it to shrink when there isn't enough space. You should also allow the wrap so that you don't see half an element when it overflow.
With your new rule there will be a wrong space with the last element.
.wrapper {
display: flex;
flex-flow: row nowrap;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-wrap:wrap;
}
/*added this*/
.list-1 {
flex-shrink:0;
}
.list-2 {
min-width:0;
overflow:hidden;
}
/**/
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>
Without overlfow here is a hack to hide the non needed element:
.wrapper {
display: flex;
flex-flow: row nowrap;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-wrap:wrap;
position:relative;
align-self: flex-start;
}
.list::after {
content:"";
position:absolute;
bottom:0;
top:37px;
left:0;
right:0;
background:#fff;
}
/*added this*/
.list-1 {
flex-shrink:0;
}
.list-2 {
min-width:0;
}
/**/
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>