Что делать при некорректном отображении HTML блоков, выведенных через PHP?

Question

[TyLo]

Есть вот такой код, выводящий последние неск. записей из бд:

<div class="comments">
          <?php
            $qr = $pdo->query("SELECT head,comment FROM comments ORDER BY id DESC limit 30");
            while($res = $qr->fetch()) {
              echo '<div class="comment"><h1>'.$res["head"].'</h1><p>'.$res["comment"].'</p></div>';
            }
          ?>
        </div>

При выводе получается белиберда:


То бишь, блоки меняют размер. Вот что будет, если выводить, не вылезая за пределы блока:

Comments

[Dymok]

Так на втором скрине всего 5 блоков, а на первом 9. Как должно быть? Они должны уместиться или что?

[TyLo]

Dymok, они должны скроллиться, имея тот же размер

[TyLo]

Dymok, они, как минимум, должны были без overflow выходить за границы, а с overflow не показываться, но с таким же размером

[Dymok]

TyLo, а стили для них какие? Желательно на codepen или jsfiddle

[TyLo]

Dymok, клик

[Dymok]

TyLo, как вариант, заменить у элемента width на mid-width

[TyLo]

Dymok, помогло min-width

Answer 1

[Yan-s]

Переверстать так, чтобы отображалось как вам требуется.