How to make checkboxes wrap nicely? - html

Question

I am making a small form where the user can choose different food categories but there are too many so I wanted to make it scrollable but right now the options have odd breakpoints (see picture link below) does anyone know how I can fix this easily with css?
screenshot of problem
This is the html of my form:
.favForm-categories{
overflow: scroll;
overflow-x: inherit;
height: 20rem;
}
.fav-choice {
line-height: 3.3rem;
margin: .1rem;
color: white;
padding: .5rem;
width: fit-content;
border: solid .1rem white;
border-radius: var(--borderRadiusButton);
background-color: var(--color2);
}
input[type='checkbox'] {
appearance: none;
background-color: white;
margin: 0;
margin-right: .5rem;
color: white;
width: 1rem;
height: 1rem;
border: .3rem solid white;
border-radius: var(--borderRadiusButton);
}
input[type='checkbox']:checked {
background-color: var(--color2);
}
<section class="favForm">
<h3 class="small-title">Choose your favourite categories</h3>
<form class="favForm-options" action="index.php?pages=home" method="POST">
<div class="favForm-categories">
<input type="hidden" name="Action" value="add_category">
<?php
foreach ($category as $cat) {
echo('<label class="fav-choice" for="'.$cat->RecipeCategory.'"><input class="checkbox-hide" type="checkbox" id="'.$cat->RecipeCategory.'" name="fav_category[]" value="'.$cat->RecipeCategory.'">'.$cat->RecipeCategory.'</label>');
}
?>
</div>
<input class="green-button" type="submit" name="submit">
</form>