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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" />
</head>
<body>

<div class="content">

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

            <?php } ?>
        
    <?php
    $rowCount++;
    } ?>
</div>
</body>
</html>
    <style>
    div.content {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
}
</style>

See drop down in image -