Bottom of flex item is cut off when stacked in column

Question

(Edit) Please view the codepen here.

I am making a card stack with Vue.js and flex box to display various apps on my website. I use a component for each card and use Vues' for function to render cards with the following template html:

<div class="card">
    <img src="">
    <h1>Title</h1>
    <a>Click</a>
</div>

This component is called "app-card". I render the cards within the following HTML:

<div id="app">
    <div class="row">
        <div id="card-container">
            <app-card> <!--Above HTML from template goes here--> </app-card>
        </div>
        <div id="main"></div>
    </div>
</div>

I use the following SASS (CSS without the { } in this case) for my card deck:

*
    margin: 0
    padding: 0 
    font-family: 'Montserrat', sans-serif !important
    box-sizing: border-box

.row
    display: flex
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: auto

#card-container
    flex: 10%

#main
    flex: 90%

.card
    width: 100%
    margin-top: 0;
    margin-bottom: auto;

.card img 
    width: 100%
    max-width: 100%

.card a
    padding: 10px
    background: blue

However the top of the next card in the deck cuts of the bottom of the button of the above card as shown in this image:

How would I go about fixing this? I've just started learning flex-box after having used Bootstrap-4 for years.

Answer 1

.card a {
  padding: 10px;
  background: blue;
  display:block;
}

Answer 2

You can fix this by adding margin-bottom property in card class.

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif !important;

  box-sizing: border-box;
}

.row {
  display: flex;

  flex-wrap: wrap;

  justify-content: space-evenly;

  align-items: auto;
}

#card-container {
  flex: 10%;
}

#main {
  flex: 90%;
}

.card {
  width: 100%;
  margin-bottom: 50px;   /* Add Margin Bottom */
}

/* For last card no margin bottom */
.card:last-child{
  margin-bottom:0;
}

.card img {
  width: 100%;
  max-width: 100%; 
}

.card a {
  padding: 10px;
  background: blue;
}

<div class="row">
  <div id="card-container">
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
  </div>
  <div id="main">

  </div>
</div>