JSFiddle - React, Tailwind, and code Playground

by joelshapiro

HTML

<div id="container">
    
    <h1>Scrollable div:</h1>
    
    <div class="scrollable">
        <p>Portal row 01</p>
        <p>Portal row 02</p>
        <p>Portal row 03</p>
        <p>Portal row 04</p>
        <p>Portal row 05</p>
        <p>Portal row 06</p>
        <p>Portal row 07</p>
        <p>Portal row 08</p>
        <p>Portal row 09</p>
        <p>Portal row 10</p>
        <p>Portal row 11</p>
        <p>Portal row 12</p>
        <p>Portal row 13</p>
        <p>Portal row 14</p>
        <p>Portal row 15</p>
        <p>Portal row 16</p>
        <p>Portal row 17</p>
        <p>Portal row 18</p>
        <p>Portal row 19</p>
        <p>Portal row 20</p>
    </div>
    
    <p>Other stuff...</p>
    
</div>

CSS

.scrollable {
    max-height: 100px;
    overflow: auto;
}


/*note: container & h1 are for this demo only, they have no role in the scrollable div*/
#container {
    padding: 20px;
    width: 150px;
}

h1 {
    font-size: 1.1em;
    font-weight: bold;
}