Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1307

Position a div to the bottom of a flexbox with padding

$
0
0

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.


Viewing all articles
Browse latest Browse all 1307

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>