UI Issue - Block Drop Down issue when using css property column-count having value greater than 1

I am using column-count css property for table of content template. I want my data in two columns.
I am using pimcore block and editable for data. but facing issues, Sometime drop down taking unlimited height and it looks wired.

This is my html + css code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" />

<div class="content">

    $rowCount = 1;
    while($this->block("TOCss_SectionBlock")->loop()) { ?>
          <h4><?= $this->input("TOCss_SectionName")->setDataFromResource("Text - {$rowCount}"); ?></h4>
            <?php while($this->block("TOCss_HeadingBlock")->loop()) { ?>
            <p><?= $this->input("p")->setDataFromResource("p - {$rowCount}"); ?></p>

            <?php } ?>
    } ?>
    div.content {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;

See drop down in image -