How to get div to align at bottom of container div

Question

Consider this fiddle: https://jsfiddle.net/vs9a4toz/

I want my buttons to be at the bottom of their divs.

I tried using align-self: flex-end on their container div. But that ends up with the content of that div gets aligned at the end not the div itself.

.container {
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1,
.box2,
.box3 {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;
}

.content {
  text-align: center;
}

.buttons {
  display: flex;
  flex-flow: column;
}

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

</div>

All you need is to add `flex-grow: 1` to `content` ... https://jsfiddle.net/vs9a4toz/2/ ... which you have to if you want to give the `content` a background color ... https://jsfiddle.net/vs9a4toz/3/ ... as with `margin-top: auto` that will not look good ... https://jsfiddle.net/vs9a4toz/4/ — Asons, Aug 21 '17 at 13:44

score 6 · Accepted Answer · answered Aug 21 '17 at 13:24

6

https://jsfiddle.net/eLuyursq/

.buttons {
  display:flex;
  flex-flow: column;
  margin-top: auto;
}

Just add margin-top: auto;

answered Aug 21 '17 at 13:24

radbrawler

2,391
2
15
22

+1 for the cleanest solution and [Flexbox and "margin-(opposite direction):auto" - relevant article](https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6) – FelipeAls Aug 21 '17 at 13:34
@FelipeAls Give the `content` a background color and suddenly this is not that good anymore...check my comment at the question – Asons Aug 21 '17 at 13:49

Kostas Siabanis · Answer 2 · 2017-08-21T13:51:11.963

3

flex-grow: 1 on .content is enough to make this work:

.content {
  text-align:center;
  flex-grow: 1;
}

It will take all available free space within the .box column. (Thanks @LGSon)

edited Aug 21 '17 at 13:51

answered Aug 21 '17 at 13:27

Kostas Siabanis

2,989
2
20
22

score 0 · Answer 3 · answered Aug 21 '17 at 13:25

Use margin property with flexbox

.container {
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1,
.box2,
.box3 {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;
}

.content {
  text-align: center;
}

.buttons {
  display: flex;
  flex-flow: column;
  margin-top: auto;
}

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

</div>

score 0 · Answer 4 · answered Aug 21 '17 at 13:26

Try using absolute positioning, please see code below:

.buttons{
    position: absolute;
    bottom: 0px;
}

.box1,
.box2,
.box3 {
    width: 100%;
    border: 1px solid blue;
    display: flex;
    flex-flow: column;
    size: 100px;
    position: relative;
}

score 0 · Answer 5 · answered Aug 21 '17 at 13:28

bsd

check it out

https://jsfiddle.net/u1bx4473/1/

you need to position:relative the divs and then position:absolute; bottom:0; width:100% the buttons...

but if you need the content to not get hidden by the buttons, you need a container for the content with overflow:auto and fixed width or something...

kind of like this : https://jsfiddle.net/u1bx4473/2/

score 0 · Answer 6 · answered Aug 21 '17 at 13:44

A solution using padding on content and absolute position on the buttons:

.container {
  width: 600px;
  display:flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1, .box2, .box3 {
  width: 100%;
  border: 1px solid blue;
  size: 100px;
  position:relative;
}

.content {
  text-align:center;
  height: 100%;
  padding-bottom: 50px;
}

.buttons {
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;
  display: flex;
  flex-flow: column;
}

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 
  
    <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 
  
    <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 

</div>

How to get div to align at bottom of container div

6 Answers6