Center buttons with the bottom of a card/container [HTML/CSS]

Question

First time poster so please don't smite me down. I been trying to get my buttons to align all the bottom of my cards to make it look nicer. I haven't figured out how to do it. I use flexbox and that might be the issue I seen some people say grid is better for vertical. Regardless here is my code and some images of what I mean.

<main>
          <div id="main-welcome">
          <h1 id="main-title">THIS WILL BE A BIG NONE SWEAR WORD TITLE</h1>
        </div>
        <section>
          <div class="column card-style">
            <div class="card-text">
                <div id="img-container">
                <i class="fa-solid fa-user" style="color: #ff91a4;"></i>
              </div>
                <div class="title-contain">
                    <h1 id="cardTitle">About Me</h1>
                </div>
              <p class="ellipsis">Learn more about me and find links to all my socials you could ever need!</p>
            </div>
            <div class="wrap">
              <button class="button">ABOUT ME</button>
            </div>
          </div>
          <div class="column card-style">
            <div class="card-text">
              <div id="img-container">
                <i class="fa-solid fa-tree" style="color: #ff91a4;"></i>
              </div>
                <div class="title-contain">
                    <h1 id="cardTitle">Join the sub server!</h1>
                </div>
                <!--Add social icon infront off title-->
              <p class="ellipsis">
                Do you want to join a Minecraft sub server? Ofcourse you do! Register now if it is your first time here! Or add a vouncher if your subscription has run out!
              </p>
            </div>
            <div class="wrap">
              <button  class="button">REGISTER NOW</button>
              <button class="button">Add vouncher</button>
            </div>
          </div>
          <div class="column card-style">
            <div class="card-text">
              <div id="img-container">
                <i class="fa-solid fa-map" style="color: #ff91a4;"></i>
              </div>
                <div class="title-contain">
                    <h1 id="cardTitle">View the server map!</h1>
                </div>
              <p class="ellipsis">See a map of the server where you can spot biomes, structures, houses and players live location!</p>
            </div>
            <div class="wrap">
              <button class="button">View the map</button>
            </div>
          </div>
          <div class="column card-style">
            <div class="card-text">
                <div class="title-contain">
                    <img id="title-img" src="assets/free-youtube-logo-icon-2431-thumb.png" alt="">
                    <h1 id="cardTitle">youtube</h1>
                </div>
              <p class="ellipsis">watch some fire tiktoks i made.</p>
            </div>
          </div>
        </section>
        </main>

CSS

 /* css cards */

  section {
    display: flex;
    flex-flow: row wrap;
    z-index: 4;
    padding-top: 12%;
    padding-left: 15%;
    padding-right: 15%;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 1;
  }

  p, a {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
  }
   nav > div > a {
    text-decoration: none;
    font-weight: 600;
    color: #ff91a4;
  }
  .title-contain {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: -1rem;

  }
  #title-img {
    width: 2rem;
    height: 2rem;
    padding-right: 0.5rem;
  }

  #cardTitle {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 28px;
  }
  #img-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  figure {
    margin: 0px;
  }

  figure img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  figure img:hover {
    opacity: 0.6;
    transition: all .3s linear;
  }
  .column {
    box-sizing: border-box;
    flex: 1 100%;
    justify-content: space-evenly;
    margin: 20px;
    flex-shrink: 0;
    flex-grow: 1;
    z-index: 4;
  }
  .card-style {
    background-color: rgb(27, 27, 27);
    border-radius: 12px;
    border-image-slice: 1;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    transition: all 0.25s linear;

    z-index: 4;
  }
  .card-style:hover {
    box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8);
    z-index: 4;
  }

  .card-text {
    color: white;
    padding: 20px;
  }

  @media (min-width: 500px) {
    .column {
        flex: 0 0 calc(100%/2 - 40px);
    }
  }

  @media (min-width: 900px) {
      .column {
        flex: 0 0 calc(100%/4 - 40px);
    }
  }
/*Button css*/
.wrap {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;

}

.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: white;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #ff91a4;
  box-shadow: 0px 15px 20px #cf5e71;
  color: white;
  transform: translateY(-4px);
}

the red boxes is where i would want the buttons to be all at the bottom with the same distance from the bottem

I used different methods suggested here with absolute positions or even some flexbox solutions but nothing seems to work. Or it breaks the whole card.

Answer 1

By looking into Chrome's devtool, we can notice that the card, although it has flex directives configured, they are not in use:

You can quickly fix it by setting the card's display to flex and adjusting the direction and justification:

.column {
    box-sizing: border-box;
    flex: 1 100%;
    margin: 20px;
    flex-shrink: 0;
    flex-grow: 1;
    z-index: 4;

    display: flex; # tell the browser engine to start using flex directives
    justify-content: space-between; # components will have space distributed between them, no space at the beginning or the end
    flex-direction: column; # components will come from top to bottom
}

And it should look something like this now: