JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    
    <div class="child">
        
        <ul id="inner" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
            
    </div>
    
</div>

<div class="parent">
    
    <div class="child">
        
        <ul id="inner-new" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
            
    </div>
    
</div>

CSS

.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow: auto;
}

li {
    padding: 30px;
}

#inner {
    background: yellow;
    padding: 10px;
    width: 500px;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}