JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<button onclick="document.getElementById('div').style.overflow='hidden';">
overflow:hidden</button>
<button onclick="document.getElementById('div').style.overflow='visible';">
overflow:visible</button>
<div id="div">
    <ul id="ul">
        <li class="li"> <em>Some stuff goes here 1</em>
        </li>
        <li class="li"> <em>Some stuff goes here 2</em>
        </li>
        <li class="li"> <em>Some stuff goes here 3</em>
        </li>
        <li class="li"> <em>Some stuff goes here 4</em>
        </li>
        <li class="li"> <em>Some stuff goes here 5</em>
        </li>
        <li class="li"> <em>Some stuff goes here 6</em>
        </li>
        <li class="li"> <em>Some stuff goes here 7</em>
        </li>
    </ul>
</div>

CSS

#div {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    height: 60px;
    width: 400px;
    overflow:visible;
}
#ul {
    height:55px;
    width:396px;
    display:block;
    white-space: nowrap;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
.li {
    display:inline-block;
    height:55px;
    width:auto;
    border-style:solid;
    border-color:lightgray;
    border-width:1px;
}