When using flexbox, how can I make it so that only one element grows in size when showing hidden content?

Question

css

The site page has the following code:

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

Each section block has hidden information that is shown when you click on the "Disciplines" button. Accordingly, the section size increases in height. All sections are written through flexbox.
The problem is that when you click on the "Disciplines" button (of any block where they are located two by two), the height increases not only for the pressed block, but also for the horizontally adjacent one. If you reduce the size of the browser window so that there is one section per line, then everything is fine, the desired block increases.
How to make it so that only the required block increases in size?
Website with the problem: kmzed.agrokontakt.in.ua/teachers

Answer 1

You can not stretch the blocks in height. Then

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