Как при использовании flexbox сделать так, чтобы при показе скрытого содержимого увеличивался по размеру только один элемент?

Question

[modestfake]

На странице сайта есть такой код:

<div>
     <section>1</section>
     <section>2</section>
     <section>3</section>
     <section>4</section>
</div>

В каждом блоке section есть скрытая информация, которая показывается при нажатии на кнопку "Дисципліни". Соответственно размер section увеличивается по высоте. Все section прописаны через flexbox.

Проблема в том, что при нажатии на кнопку "Дисципліни" (любого блока, где они расположены по два) высота увеличивается не только у нажатого блока, а и у соседнего по горизонтали. Если уменьшить размер окна браузера так, чтобы было по одному section в строке, тогда всё хорошо, увеличивается нужный блок.

Как сделать так, чтобы увеличивался в размере только нужный блок?

Сайт с проблемой: kmzed.agrokontakt.in.ua/teachers

Answer 1

[Евгений Петров]

Можно не растягивать блоки по высоте. Тогда

#allt {
	/*...*/
	align-items: flex-start; /*По умолчанию stretch*/
}