Using: Bootstrap 4.3.1 and jQuery 3.4.1
I'm making a web application which generates a lot of bootstrap cards inside a .card-columns container. When the user hovers over a card, it gets scaled up (with CSS transform: scale(1.1)) to show that it's selected.
The problem is that in the first row, the top of the cards get cut off, as shown here: https://i.stack.imgur.com/Ioxlt.png
(interestingly, the very first one seems to be just fine)
I tried setting overflow: visible, and tried different padding and margin settings, but didn't work.
Here is the code for a card inside the container:
<div class="card-columns" id="forms-container" style="margin: 25px; margin-bottom: 50px;">
<div class="card" id="32">
<div class="card-body">
<h5 class="card-title">test_final</h5>
<h6 class="card-subtitle mb-2 text-muted"> by Developer from 9D</h6>
<p class="card-text">in Design</p>
</div>
</div>
</div>
As I tested, this problem occurs when using Chrome (screenshots taken in Chrome), Edge and IE (both cutting off the top and right of the card), but Firefox (dev edition) does the job right, and doesn't cut the cards.
I also noticed that when there are less cards, the top appears in the bottom of the container: https://i.stack.imgur.com/drqjJ.png
The site is temporarily available at http://nszabolcs.rf.gd/formsapp/
