Align div at bottom of div container

Question

I know this question came up many times but none of the suggested solutions is working for me so I opened up a code sandbox and made an example.

What I want

I want to place an item at the bottom of a div that already has some children. In my code sandbox the desired div to place at the bottom has a className of note__actions.

What I tried

Setting the container to position: relative and the item to position: absolute
Using flexbox and setting the container to display: flex and the item to align-self: flex-end
Multiple other things like vertical-align, and making empty items to fill up the space in-between

Div setup

<div className="flexBoxContainer" />
    <div className="item">
        <div>Header</div>
        <div>Title</div>
        <div>Paragraph</div>
        <div className="bottom__item">Actions>/div> // Only this div should go to the bottom of the "item" div
    </div>
</div>

Sandbox

https://codesandbox.io/s/infallible-sound-wf166?file=/src/App.js

Which element of your Sandbox do you wish to place at the bottom exactly ? — Xanthous, Jul 13 '21 at 07:32

score 2 · Answer 1 · answered Jul 13 '21 at 07:34

2

Give the container display: flex; justify-content: space-between; - that will pull the content from top to bottom. If you want only the last item on the bottom and the rest on the top, wrap the rest with a div, like

<div className="flexBoxContainer" />
    <div className="item">
        <div>
            <div>Header</div>
            <div>Title</div>
            <div>Paragraph</div>
        </div>
        <div className="bottom__item">Actions>/div>
    </div>
</div>

answered Jul 13 '21 at 07:34

Ola

21
3

I only want to place the last item at the bottom. I know what you want to do, thanks for your answer. Why is `align-self: flex-end` or any other solution not working? – BenjaminK Jul 13 '21 at 07:38
1

Because `flex-direction: column;` is essentially flipping the div sideways. That would work without it. Another solution for column is to stretch one of the divs to take a whole space, so for example you can give the "paragraph" div `flex-grow: 1;`. Cheers! – Ola Jul 13 '21 at 07:47

score 1 · Accepted Answer · answered Jul 13 '21 at 07:40

1

You are already using flexbox which is great. Now, use margin-top:auto on note__actions to push the div to the bottom.

.note__actions {
  margin-top: auto;  
}

answered Jul 13 '21 at 07:40

Ismail Vittal

1,077
9
12

Such a simple change but a great result, thanks!! – BenjaminK Jul 13 '21 at 07:48

suther · Answer 3 · 2021-07-13T08:18:43.807

1

You can use a grid for that. Change this in your Style on codesandbox.io:

.note {
  background-color: rgb(255, 255, 211);
  border-radius: 15px;
  width: 200px;
  padding: 24px;
  display: grid;
  /*flex-direction: column;*/
  grid-template-rows: 50px 80px 1fr 80px;  /* height: 100%; */
  /* align-items: flex-end; */
  /* position: relative; */
}

.note__actions_bot {
  background-color: red;
  height: 100px;
  display: grid;
  justify-content: center;
  align-items: center;
}

I recommend this awesome Video to get a nice overview and some hint's how to do, and when to use which one of flex, grid and other solutions:

https://www.youtube.com/watch?v=qm0IfG1GyZU&feature=youtu.be

edited Jul 13 '21 at 08:18

answered Jul 13 '21 at 07:42

suther

12,600
4
62
99

Thank you for your answer, so you think working with `display: grid` is the better approach here? Your video explanations are very welcome as I most of the time use flex and this will help to open my approach to other solutions. – BenjaminK Jul 13 '21 at 07:46
Your video links are both the same. – BenjaminK Jul 13 '21 at 07:50
1

Grid becomes very handy if you need full-height layouts where stuff fill-up till the buttons. In the Video you see many suggestions. I think there is no rule to better use grid or flexbox. The point is: Choose the right tool which fit best for the given issue. – suther Jul 13 '21 at 08:20

score 1 · Answer 4 · answered Jul 13 '21 at 07:49

You could add a flex: 1; to the flexible content, for instance

.note {
  background-color: rgb(255, 255, 211);
  border-radius: 15px;
  height: 400px;
  width: 200px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.note-content {
  flex: 1;
}

.note-action {
  align-self: flex-end;
}

<div class="note">
  <div>Peter Holbert - 09. Jul 21 23:28</div>
  <div>Note Title</div>
  <div class="note-content">Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="note-action">Action 1</div>
</div>

score 0 · Answer 5 · answered Jul 13 '21 at 07:40

0

Add margin-top : auto to the note__actions element

answered Jul 13 '21 at 07:40

Xanthous

442
3
12

Align div at bottom of div container

5 Answers5