Pushing last list item to the bottom

Question

I am using the Vali Admin theme and I am trying to push the last list item in the left sidebar to the bottom.

I have barely used flexbox before so I am not familiar with it at all, but I changed the menu to display: flex and then followed this answer to try to push the last item to the bottom. I am trying to do exactly what the person in that question if after.

These are my modifications to the theme:

.app-menu {
  @extend .app-menu;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;

  li:last-of-type {
    margin-top: auto;
  }
}

Working fiddle.

I think the problem is that the menu isn't using as much height as it can.

I would gladly include a working snippet but for the love of my I couldn't figure out how to create a jsfiddle. It doesn't allow local files and it would block my gist. Same with Codepen.

jsfiddle doesn't work with local file, you need to pull all the content inside — Temani Afif, Nov 14 '19 at 12:35
@TemaniAfif I tried pasting the whole theme CSS and the page just froze. It can't syntax highlight so much code. — dabadaba, Nov 14 '19 at 12:37
you need to reduce your code to the minimal one, we don't need your full website — Temani Afif, Nov 14 '19 at 12:38
@TemaniAfif the theme needs to be included in order for everything to behave as it does... — dabadaba, Nov 14 '19 at 12:40
we aren't going to inspect all your theme. You should do the effort to narrow your code to isolate the issue. Doing so you will probably find the solution alone. — Temani Afif, Nov 14 '19 at 12:41

score 2 · Accepted Answer · answered Nov 14 '19 at 13:03

2

Add the following on .app-sidebar:

  display: flex; // make sidebar a flexbox
  flex-direction: column; // so it will align column direction

We do the thing above so we can apply flex related styling on the child.

This will make the parent or sidebar a flexbox, then add the following on .app-menu

    flex: 1; // this will take all the remaining space on the sidebar

and remove padding-bottom on .app-menu so the last item will stay in the bottom without the padding.

answered Nov 14 '19 at 13:03

I am L

4,288
6
32
49

Can you explain why `flex: 1` makes the child take up all the height? – dabadaba Nov 14 '19 at 13:17
@dabadaba adding `flex: (number)` will divide the "REMAINING parts" of the parent div depends on the number. let say you have a 100% height parent with 2 childs, first child have `flex: 1` and the second have `flex: 2` - the second will take 60% percent of height while first will take 30% - it divided the space by flex, so if you do `flex: 1` it will take all the remaining space to itself – I am L Nov 14 '19 at 13:21
@dabadaba This article helped me with flexbox while I was first studying it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - This made me very good at it. – I am L Nov 14 '19 at 13:21
1

flex:1 is shorthand for { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } – Vivekraj K R Nov 14 '19 at 13:23
^^ true - I rarely use those 3 tho and just use `flex: 1` tho. – I am L Nov 14 '19 at 13:24

Vadym Semenets · Answer 2 · 2019-11-14T13:08:43.143

0

It's right to do as it described in link you've attached. But you didn't set 100% height for your ul. Setting height: 100%; to .app-menu class solves your problem.

Here is the working example based on your code:

https://jsfiddle.net/zewx18ps/1/

edited Nov 14 '19 at 13:08

answered Nov 14 '19 at 12:58

Vadym Semenets

143
5

Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Nov 14 '19 at 13:06
That causes an unwanted overflow. It goes over the full height. – dabadaba Nov 14 '19 at 13:08
@Paulie_D I've just fixed my answer – Vadym Semenets Nov 14 '19 at 13:10
@dabadaba As you have `.app-sidebar__user` div in your `.app-sidebar` and it takes 104px of the whole height. I guess `height: calc(100% - 104px)` will solve your problem. – Vadym Semenets Nov 14 '19 at 13:14
Adding a fix number or using calc is not really ideal if you can just use flexbox to fix the issue. actually I don't recommend adding a fix number on style on an element that you are not sure whether you're going to add more stuff in the future. flexbox magic baby – I am L Nov 14 '19 at 13:17

score 0 · Answer 3 · answered Nov 14 '19 at 12:59

try this

.app-menu {
    margin-bottom: 0;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;

if last item need to be displayed at the bottom of the page. try by setting height:100% to the ul

Pushing last list item to the bottom

3 Answers3