Why is scrollbar showing in table cell?

Question

I have some checkboxes in a table cell, and I need a vertical scrollbar for when there are more than three rows, this works. However, when there are just three rows, the scrollbar shows. It's like there's a gap at the bottom of the checkbox set, which is larger than the line spacing between checkbox rows. I am running it in Chrome.

Here is my code:

body {
  background-color: EDF2F4;
}

* {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: text-top;
  font-family: Segoe UI;
}

label {
  font-size: 12;
  white-space: nowrap;
}

div.addresses {
  line-height: 0.3;
  text-align: left;
  width: 100%;
  height: 100%;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

<table>
  <td style='width:350px; height:44px; border: 1px solid #a3a3a3'>
    <div class='addresses'>
      <label for="1104"><input type="checkbox" id="1104" name="address" value="1104" onchange="filter()">address1</label>
      <label for="1672"><input type="checkbox" id="1672" name="address" value="1672" onchange="filter()">address2y</label>
      <label for="1674"><input type="checkbox" id="1674" name="address" value="1674" onchange="filter()">address3</label>
      <label for="1708"><input type="checkbox" id="1708" name="address" value="1708" onchange="filter()">address4</label>
      <label for="1729"><input type="checkbox" id="1729" name="address" value="1729" onchange="filter()">address5</label>
      <label for="1818"><input type="checkbox" id="1818" name="address" value="1818" onchange="filter()">address6y</label>
      <label for="1820"><input type="checkbox" id="1820" name="address" value="1820" onchange="filter()">address7</label>
      <label for="1821"><input type="checkbox" id="1821" name="address" value="1821" onchange="filter()">address8</label>
      <label for="1840"><input type="checkbox" id="1840" name="address" value="1840" onchange="filter()">address9</label>
      <label for="1845"><input type="checkbox" id="1845" name="address" value="1845" onchange="filter()">address10</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
    </div>
  </td>
</table>

Answer 1

You could set min-height: 3em on the div.address, so it will fit at least 3 full text lines.

// just for demonstration purposes
window.toggle.addEventListener('click', () => {
  window.additionalboxes.toggleAttribute('hidden');
});

body {
  background-color: EDF2F4;
}

* {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: text-top;
  font-family: Segoe UI;
}

label {
  font-size: 12;
  white-space: nowrap;
}

div.addresses {
  line-height: 0.3;
  text-align: left;
  width: 100%;
  height: 100%;
  overflow: auto;
  min-height: 3em;
}

table {
  border-collapse: collapse;
}

<table>
  <td style='width:350px; height:44px; border: 1px solid #a3a3a3'>
    <div class='addresses'>
      <label for="1104"><input type="checkbox" id="1104" name="address" value="1104" onchange="filter()">address1</label>
      <label for="1672"><input type="checkbox" id="1672" name="address" value="1672" onchange="filter()">address2y</label>
      <label for="1674"><input type="checkbox" id="1674" name="address" value="1674" onchange="filter()">address3</label>
      <label for="1708"><input type="checkbox" id="1708" name="address" value="1708" onchange="filter()">address4</label>
      <label for="1729"><input type="checkbox" id="1729" name="address" value="1729" onchange="filter()">address5</label>
      <label for="1818"><input type="checkbox" id="1818" name="address" value="1818" onchange="filter()">address6y</label>
      <label for="1820"><input type="checkbox" id="1820" name="address" value="1820" onchange="filter()">address7</label>
      <label for="1821"><input type="checkbox" id="1821" name="address" value="1821" onchange="filter()">address8</label>
      <label for="1840"><input type="checkbox" id="1840" name="address" value="1840" onchange="filter()">address9</label>
      <label for="1845"><input type="checkbox" id="1845" name="address" value="1845" onchange="filter()">address10</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <span id="additionalboxes" hidden><!-- just for demonstration purposes -->
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
      </span>
    </div>
  </td>
</table>

<!-- just for demonstration purposes -->
<br>
<button id="toggle">toggle 3/4 rows of checkboxes</button>