JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<title>Scrollbar Issue Example</title>
</head>
<body>
<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 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>
...
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: 0px;
}
fieldset.scroll ul
{
padding-top: 9px;
}