CSS flexBox won't position to bottom

Question

Hey guys I can't for the life of me get the button to go to the bottom of the container using flexBox. I have tried multiple different things, and for some reason, it's being stubborn. I've actually used flexBox quite a bit so I am confused on why I am running into so much trouble. The button is currently in the middle of the DivCont with the background colorWhite.

Here is my code and you can see on the bottom I even tried adding a div around the third button to test it out... Excuse the justify contentflex-end' spam

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

import { Link } from "react-router-dom";

const useStyles = makeStyles({
  divCont: {
    backgroundColor: "white",
    display: "flex",
    width: "250px",
    height: "250px",
    borderRadius: "10px",
    margin: "40px",
    flexDirection: "column",
  },
  button: {
    display: "flex",
    justifyContent: "flex-end",
    alignContent: "flex-end",
    alignItems: "flex-end",
  },
  mainCont: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-end",
    alignContent: "flex-end",
  },
  h2: {
    fontWeight: "normal",
    display: "flex",
    justifyContent: "center",
  },

  p: {},
  buttonCont: {
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "flex-end",
    alignContent: "flex-end",
  },
});

export default function HomeMeunuGrid() {
  const classes = useStyles();

  return (
    <div className={classes.mainCont}>
      <div className={classes.divCont}>
        {" "}
        <h2 className={classes.h2}>Custom Tubmlers</h2>
        <p className={classes.p}>Hello to the world</p>
        <button className={classes.button}>Click me</button>
      </div>
      <div className={classes.divCont}>
        <h2 className={classes.h2}>Affordable Prices</h2>
        <p className={classes.p}> Hello to the world</p>
        <button className={classes.button}>Click me</button>
      </div>
      <div className={classes.divCont}>
        <h2 className={classes.h2}>Family Owned</h2>
        <p className={classes.p}> Hello to the world</p>
        <div className={classes.buttonCont}>
          <button className={classes.button}>Click me</button>
        </div>
      </div>
    </div>
  );
}

Answer 1

Try using: "auto" margins

Auto margins

From site:

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

So you can use this:

buttonCont: { margin-top: auto; }

Example how to implement:

.mainCont {
  height: 400px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  margin-top: auto;
}

<div class="mainCont">
  <h1>Test 1</h1>
  <h2>Test 2</h2>
  <p>Bottom</p>
</div>