JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>
 
<BR>
  
<div class='wrap'>
    <ul class='two'>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

CSS

.wrap {
    overflow:hidden;
    width:200px;
    border:2px solid red;
    white-space: nowrap;
    overflow: hidden;
}
ul{
    display:flex;
    list-style-type:none;
    margin:0; padding:0;
    /* width:1000px; <-- 이거 사용하지 않고 처리 */
}
.two {
    width:1000px /* 이거 사용하지 않고 처리 */
}
li{
    float:left;
    display: inline-block;
    padding:5px;
}