JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <title>Scrollbar Issue Example</title>
    </head>
    <body>
        <p>The first example scrolls correctly, but has an unnatural empty space above the scrollbar. The second example doesn't exhibit this problem, however when you scroll down the text overlaps with the fieldset legend.</p>
        <form>
            <fieldset>
                <legend>Flags:</legend>
                <div>
                    <ul>
                        <li><input type="checkbox" id="c1"> <label for="c1">Flag 1</label></li>
                        <li><input type="checkbox" id="c2"> <label for="c2">Flag 2</label></li>
                        <li><input type="checkbox" id="c3"> <label for="c3">Flag 3</label></li>
                        <li><input type="checkbox" id="c4"> <label for="c4">Flag 4</label></li>
                        <li><input type="checkbox" id="c5"> <label for="c5">Flag 5</label></li>
                        <li><input type="checkbox" id="c6"> <label for="c6">Flag 6</label></li>
                        <li><input type="checkbox" id="c7"> <label for="c7">Flag 7</label></li>
                        <li><input type="checkbox" id="c8"> <label for="c8">Flag 8</label></li>
                        <li><input type="checkbox" id="c9"> <label for="c9">Flag 9</label></li>
                        <li><input type="checkbox" id="c10"> <label for="c10">Flag 10</label></li>
                        <li><input type="checkbox" id="c11"> <label for="c11">Flag 11</label></li>
                        <li><input type="checkbox" id="c12"> <label for="c12">Flag 12</label></li>
                    </ul>
                </div>
            </fieldset>
            
            <fieldset class="scroll">
                <legend>Scroll:</legend>
                <div>
                    <ul>
                        <li><input type="checkbox" id="c1"> <label for="c1">Flag 1</label></li>
                        <li><input type="checkbox" id="c2"> <label...

CSS

fieldset
{
    border: 1px solid #DEDDDD;
    border-radius: 5px 5px 5px 5px;
    float: left;
    position: relative;
    white-space: nowrap;
    margin: 20px;
}

legend
{
    font-weight: bold;
    margin-left: 5px;
}

div
{
    max-height: 180px;
    overflow: auto;
    padding-right: 10px;
}

ul
{
    padding: 0 10px 5px;
}

input[type="checkbox"]
{
    margin: 3px 0;
}

label
{
    cursor: pointer;
}


fieldset.scroll div
{
    position: relative;
    top: -9px;
}

fieldset.scroll ul
{
    padding-top: 9px;
}

p
{
    padding: 10px;
}