Positioning div in bottom left with flexbox

Question

I'm running into some difficulty positioning an element in the bottom left corner when using a flexbox. Essentially I'm trying to make the 'world' text to appear directly below the 'hello' text (ie. the bottom left corner of the flexbox).

rel {
  position: relative;
  background: rgba(255, 0, 0, 0.5);
  padding: 5px;
  margin-top: auto;
}
abs {
  position: absolute;
  background: rgba(0, 255, 0, 0.5);
  padding: 5px;
}
column {
  display: flex;
  flex-direction: column;
}
item {
  display: flex;
  align-items: center;
  flex: auto;
  border: 1px solid blue;
}

<column>
  <item>
    hello
    <br>hello
    <br>hello
    <br>hello
    <br>
    <rel>
      <abs>
        world
        <br/>world
        <br/>world
        <br/>world
        <br/>
      </abs>
    </rel>
  </item>
</column>

Like [that](https://jsfiddle.net/c5cbxw9q/1/)? – pol Nov 20 '16 at 03:24 — pol, Nov 20 '16 at 03:24
This may help: http://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Nov 20 '16 at 03:41 — Michael Benjamin, Nov 20 '16 at 03:41

Loktar · Answer 1 · 2016-11-20T03:35:37.267

Is this what you're after? What I did was make item display as flex column as well which will make additional elements fall under it as a column. Also added align-items: flex-start; to column so they are aligned properly. You can also remove the position properties as they aren't needed.

Live Demo on jsfiddle, snippet below.

CSS Changes

column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

item {
    display: flex;
    align-items: center;
    flex: auto;
    flex-direction: column;
    border: 1px solid blue;
}

Snippet

rel{
  background:rgba(255,0,0,0.5);
  padding:5px;
}

abs{
  background:rgba(0,255,0,0.5);
  padding:5px;
}

column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

item {
  display: flex;
  align-items: center;
  flex: auto;
  flex-direction: column;
  border: 1px solid blue;
}

<column>
 <item>
  hello<br>
  hello<br>
  hello<br>
  hello<br>
  <rel>
   <abs>
    world<br/>
    world<br/>
    world<br/>
    world<br/>
   </abs>
  </rel>
 </item>
</column>

While that does get the desired result, I need the absolute positioning as the 'worlds' will be over other text and shouldn't disturb the content. — Robbie, Nov 20 '16 at 03:35
@Robbie so something like this? https://jsfiddle.net/c5cbxw9q/3/ where you just add `absolute` back? — Loktar, Nov 20 '16 at 03:37
Yep, I didn't even think that the entire thing was now relative to the flex box, so all you needed was to change the relative to a absolute. — Robbie, Nov 20 '16 at 04:03

score 0 · Answer 2 · 2016-11-20T03:37:13.457

Add flex-direction: column;to the item tag. Also removing the padding will perfectly match the edges. That is the direct container that holds all the elements. Also you can remove the absolute and relative positions.

rel {
  background: rgba(255, 0, 0, 0.5);
  padding: 5px;
}
abs {
  background: rgba(0, 255, 0, 0.5);
}
column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
item {
  display: flex;
  align-items: center;
  flex: auto;
  flex-direction: column;
  border: 1px solid blue;
}

<column>
  <item>
    hello
    <br>hello
    <br>hello
    <br>hello
    <br>
    <rel>
      <abs>
        world
        <br/>world
        <br/>world
        <br/>world
        <br/>
      </abs>
    </rel>
  </item>
</column>

Positioning div in bottom left with flexbox

2 Answers2