JSFiddle - React, Tailwind, and code Playground

by Darcy Adams

HTML

<div class='list_cont'>
    <div class='visible'>
    <div class='list'>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>This is a really long title that is overflowing to the right</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
        <div class='item'>test</div>
    </div>
    </div>
</div>

CSS

.list_cont {
    position: absolute;
    overflow: visible;
    top: 0;
    bottom: 0;
    width: 180px;
    height: 200px;
}
.visible {
    overflow: visible;
}
.list {
    overflow-y: scroll;
    overflow-x: visible;
    width: auto;
    height: 200px;
}
.list div {
    white-space: nowrap;
}