Position a div to the bottom of a flexbox with padding

Question

I have something like:

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<div class="flex-container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

I want to be able to have box2 stay in the center while positioning box1 at the bottom of the flex container. The problem is since the flex container has padding, bottom only positions it to where the padding ends. Also another problem is when I give box1 absolute positioning, box2 will then reposition itself to fill the entire flex container because box1 is out of the flow.

This seems like it could be an [XY Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Instead of asking us about your solution (*"How do I make this work using flexbox?"*), ask us about the *problem* (*"How do I make something that looks like this..."*). Although the solution may involve flexbox, it isn't *always* the answer, and you open yourself up to better answers. — Tyler Roper, Jul 30 '18 at 20:09
possible guidance: https://stackoverflow.com/q/36191516/3597276 — Michael Benjamin, Jul 30 '18 at 21:22

score 0 · Answer 1 · answered Jul 30 '18 at 20:05

It's not clear what exactly you're trying to achieve, but if I got it right, this should serve as a solution.

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
  border: 3px solid black;
}

div {
  text-align: center; // not necessary
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border: 1px solid green;
}

.box2 {
  border: 1px solid red;
  height: 20px;
  width: auto;
  padding: 5px;
}

<div class="flex-container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

EDIT: If you literally want to center the element, you need to add the padding of either box or box2 to the container as artificial height or use the calc() method.

Side by side but box 1 flush to the bottom, box 2 stays in center — Vincent Nguyen, Jul 30 '18 at 20:24

Position a div to the bottom of a flexbox with padding

1 Answers1