fix elements to the bottom of a flex container - html

Question

I am using flexbox to create part of a page and I have 2 buttons that will open modals in one of the flexbox items. I would like to fix the buttons to the bottom of the item like a footer if possible.
I have created a CodePen to demo the issue. I have tried several solutions but I can't seem to get the buttons aligned at the bottom. I am relatively new to HTML and CSS so it's very possible that I've missed something trivial.
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
button {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>

Answer 1

You can make .one display: flex; flex-direction: column;, wrap the buttons in an element, and use justify-content: space-between on .one to push the buttons to the bottom of the column.
#container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one{
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.two{
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
button {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<div class="buttons">
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>

Answer 2

Since flex properties only apply to the children of a flex container, your buttons are not flex items.
The buttons are descendants of the flex container (#container), but not children, so they are beyond the scope of flex layout.
One method to resolve the issue would be to make the parent of the buttons a flex container. Then flex properties can be applied to the buttons.
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
display: flex; /* new */
flex-wrap: wrap; /* new */
}
p {
flex: 0 0 100%; /* new */
}
button {
margin: auto 10px 0; /* new */
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
Learn more about the flex formatting context here:
Proper use of flex properties when nesting flex containers
Learn more about flex auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 3

One approach would be to put your buttons in their own <div> like so:
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<div class="btn-container">
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
and change your css to:
#container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
height: 100vh;
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
height: 600px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
.btn-container {
justify-content: flex-end;
display: flex;
}
button {
margin: 10px;
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}