CSS HTML li item allways on the right/left, hide the rest - html

Question

I have a nav bar wit several items.
<ul>
<li class="fixedLeft"><a class="links-main" href="#">Left1</a></li>
<li class="left"><a class="links-main" href="#">Left2</a></li>
<li class="left"><a class="links-main" href="#">Left3</a></li>
<li class="right"><a class="links-main" href="#">Right1</a></li>
<li class="right"><a class="links-main" href="#">Right2</a></li>
<li class="fixedRight"><a class="links-main" href="#">Right3</a></li>
</ul>
I don't know how to fix the "fixedLeft" class to the left, and "fixedRight" class to the right, so that if i change the window size, or use it on a smaller window, those li are allways visible, the others are not important, if i can't see them i'll deal with that later.
(just to clear things up, i don't mean "float:left/right", i'm already using those.)
Right now when i change the size of the screen, the li start dissapearing right to left, How can i avoid the "fixedRight" item to dissapear.
(if possible, i'd like to implement the solution only with html and css)

Answer 1

I think the only way by using only pure CSS is with inline-block mode, like this example:
li {
width: 80px;
height: 20px;
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
z-index: 100;
vertical-align: top;
font-size: 0;
position: relative;
margin-right: -4px;
}
a {
padding: 0;
margin: 0;
display: block;
font-size: 12px;
text-align: center;
text-decoration: none;
}
ul li:nth-child(1) {
position: absolute;
left: 0;
top: 0;
z-index: 200;
background-color: red;
}
ul li:nth-last-child(1) {
position: absolute;
right: 0;
top: 0;
z-index: 200;
background-color: red;
}
ul {
position: relative;
margin: 0;
padding: 0 80px;
width: calc(100% - 160px);
overflow: hidden;
white-space: nowrap;
background-color: yellow;
}
Here is the jsfiddle: https://jsfiddle.net/fabio1983/oc398jx9/