css flex ul with first and last fixed li

Question

Ok, I am now starting to use flexbox a bit more, but it is not very logic to me as an old man,

I have an unsorted horizontal list (ul) with +/- 10 items (li) That consist out only 1 row, no word wrap etc. What I want is that the first and the last one are always visible, and the others can have a 'display:none' if there is not enough screen space. The li;s can have different widths on every page. I have now this code, and it sort of works, but a list item is now half visible if the screen or browser is not wide enough. They should go completely not visible, how can I achieve this? I have tried many things....

 ul{ list-style: none; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; position: relative } ul li{ flex: auto; display: inline-block; line-height: 30px; float: left; margin-right: 0px; } ul li.b{ background:#ccc; position: absolute; right: 0 } ul li a{ display: inline-block; margin-right: 0px; padding: 0 10px 0 10px }

 <ul> <li class="a"><a href="#">fixed</a></li> <li><a href="#">2 test</a></li> <li><a href="#">3 test</a></li> <li><a href="#">4 test</a></li> <li><a href="#">5 test</a></li> <li><a href="#">6 test</a></li> <li><a href="#">7 test</a></li> <li><a href="#">8 test</a></li> <li><a href="#">9 test</a></li> <li class="b"><a href="#">last fixed</a></li> </ul>

Answer 1

"Make become invisible if they are shown only partially"

Unfortunately this isn't possible using flex-boxes.
But, this is possible using display: block; float: left; display: block; float: left; and overflow: hidden;

See example here: https://jsfiddle.net/q4m2grnz/

However I advise agains't this method, and any others that don't use media query's.

Media Queries are the standard for any dynamic functionality based on screen size.

Answer 2

Try getting rid of position: absolute for the last li and add justify-content: space-between to the flex container (ul), which will seperate the remaining two elements when the others are hidden.

Also the 'ul' comes width a padding so you have to set padding: 0 to reset that.

One other thing is that you are using flex: auto on li items which expands them if you remove that part everything should be in place.