JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:300px;" > 
<ul id="menu1">
    <li class="noChild"><a href="#" >7 Option</a></li>
    <li class="noChild"><a href="#">6 Option</a></li>
    <li class="noChild"><a href="#" >5 Option</a></li>
    <li class="noChild"><a href="#" >4 Option</a></li>
    <li class="noChild "><a  href="#" >3 Option</a></li>
	<li class="noChild"><a href="#" >2 Option</a></li>
    <li class="noChild "><a  href="#" >1 Option</a></li>
 </ul>
</div >

CSS

ul#menu1{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	display:block;
	height:30px;
	font-size:14px;
	font-family: Arial, helvetica, clean, sans-serif;
	outline:none;
	
}
ul#menu1 li{
	display:block;
	float:left;
	margin:auto;
	padding-left: 0px;
	border-left:solid 1px #000000;
	border-right:solid 1px #000000;
	border-top:solid 1px #000000;
	}

JavaScript

var totalVisible=0;
	var outerDivWidth=$("#menu1").parent().outerWidth();	
	$("#menu1").find(">li").each(function(i) {
		var eachLiWidth=$(this).outerWidth();
        
		totalVisible=totalVisible+eachLiWidth;
		if(outerDivWidth<totalVisible)
		{
			$(this).css({display:"none"});
		}
    });