JSFiddle - React, Tailwind, and code Playground

HTML

<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 id="outer">
                    <div id="inner">
                        <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>
                           ...

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
            {
                height: 180px;
                overflow: auto;
                padding-right: 10px;
            }

            div #inner
            {
                height: 270px;
                overflow: hidden;
            }

            div #outer
            {
                height: 150px;
                overflow-y: scroll;
            }

            ul
            {
                padding: 0 10px 5px;
            }

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

            label
            {
                cursor: pointer;
            }


            fieldset.scroll div
            {
                margin: -9px;
            }

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

            p
            {
                padding: 10px;
            }