JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>fixed</li>
    <li>fixed</li>
    <li>fixed</li>
    <li class="float">FLOAT</li>
    <li>fixed</li>
    <li>fixed</li>
</ul>

CSS

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul{
    list-style: none;
    width: 100%;
    overflow: hidden;
    background-color: red;
    padding: 5px  0 0 5px;
}
.float{
    /*что тут написать чтобы растянуть список на всю ширину?*/
}
li{
    float: left;
    width: 50px;
    background-color: green;
    margin-right: 5px;
}