Андрей Гуртовой

Как я понял , d-flex. Это некая утилита для назначения display: flex для элемента.

Если так то наверное это будет оверхедом для вашей задачи. Просто избавьтесь от div которые у вас в примере написаны без классов. Флекс-дети итак по умолчанию имеют свойство align-item: stretch; которое их растягивает до высоты максимального брата.

переверстать с использованием bem-нейминга

не читал но тоже добавлю.
Делай блоки как в csssr - шаблоне https://github.com/CSSSR/csssr-project-template/tr...
Подозреваю, что посоны выше уже описывали всё это добро по 2 раза, но этот подход наиболее хороший

Это называется не границы а направляющие

не хватает тега "я не знаю как объяснить чего я хочу"

вот так:
jsbin.com/xeroro/1/edit?html,css,output -- в примере слой с оверфловом - жёлтый
т.е. повесь свойство position:relative выше чем overflow:hidden и толтип будет прикручиваться к нему и на его не будет влиять оверфлоу.

в строке $('#pageContent').html(msg);
указывается куда именно выводить то что придёт с сервера

# - это id элемента, как например

далее вкурите, я надеюсь.

p.s. и сделайте из
if(parseInt(msg)!=0)

вот это
if(parseInt(msg)!==0)

из parseInt всегда выходит только число и нет нужды в нестрогой проверки(которая работает медленней чем строгая)

codemirror.net

угу, inline-block - то что Вам нужно. Единственная проблема в том, что нужно избавиться от пробельных символов между блоками .post.
Это можно сделать разными способами:
1. Убрав их с помощью джаваскрипта.

$('.columns')
  .contents()
  .filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
  }).remove();

2. Закомментировать.

<div class="columns"><!-- 
    --><div class="post">text<br>text</div><!-- 
    --><div class="post">text<br>text<br>text<br>text</div><!-- 
...
    --><div class="post">text<br>text</div><!-- 
    --><div class="post">text<br>text</div><!-- 
--></div>

3. Выставить у родителя font-size: 0; , и назначить для .post font-size: medium;
4. Ну или писать всё одной строкой.