Position to bottow in flex box with div

Asked Dec 14 '17 at 16:54

Active Dec 14 '17 at 18:10

Viewed 45 times

I'm trying to position a div with a progress bar to the bottom of my flexbox but everything i find on stackoverflow doesnt work or is not applied as it need to be...

tried absolute to the bottom, auto-margin, flex-grow and none of them has been fixing the problem!

  <div class="row statut-plan-action">
    <div class="col" *ngFor="let statut of details.statuts">
      <div>{{statut.descriptionCourte}}</div>
      <div class="fill-space">
        <app-etape-plan-action-statut [etape]="obtenirEtape(statut.code)" [descriptionStatut]="statut.descriptionCourte"></app-etape-plan-action-statut>
      </div>


      <ngb-progressbar class="progression" type="success" [value]="obtenirPourcentageCompletion()"></ngb-progressbar>
    </div>
  </div>

so i'm trying to put the ngb-progressbar to the bottom of my div, but i didnt success. i've tried by putting it in a div and it didnt work either

here is the last try i've did in css

.statut-plan-action {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}

.col {
  padding-left: 0;
  padding-right: 0;
}

.fill-space {
  flex-grow: 1;
}

.progression {
  margin-top: auto;
}

* EDIT *

Image of the problem

edited Dec 14 '17 at 17:28

asked Dec 14 '17 at 16:54

Vince

1,279
2
20
40

So where is the bar currently appearing when you do this? – Michael Platt Dec 14 '17 at 17:15
please post enough code to reproduce the problem – Michael Benjamin Dec 14 '17 at 17:18
i'cant add the whole Angular4 project so you can reproduce sorry :( but the progress bar is still under the etape-plan-action-statut control and each progress bar doesnt appear verticaly-aligned – Vince Dec 14 '17 at 17:20
So presumably (if I understand correctly) the bar appears right under the div with the class `fill-space`. The goal is to get it stuck to the bottom of the overall `div` instead then? – Michael Platt Dec 14 '17 at 17:23
your right, that's what i need – Vince Dec 14 '17 at 17:26
see the edit to see the current behavior – Vince Dec 14 '17 at 17:29
Ah ok. I'm with you now. So the problem is going to be that none of the `div` tags are set to be a specific height, hence the dynamic growth. What you'll want to do is set it up such that they have a determined height (could be a min-height or something) and then float the progress bars to the bottom. – Michael Platt Dec 14 '17 at 17:35
i'm in a flex box, so it should not use defined height as the flexbox utility – Vince Dec 14 '17 at 17:38
Is your `col` element a flex container? ... and if, is it "row" or "column" direction? – Asons Dec 14 '17 at 17:47
col needed the display flex too and i've put the fill-space class with flex: 1 0 auto – Vince Dec 14 '17 at 17:53
now it work as needed ! thx – Vince Dec 14 '17 at 17:53
Of course `col` need `display: flex`...Flexbox is a parent/child relation – Asons Dec 14 '17 at 17:54
i didnt know, i tough it was for anything under parents – Vince Dec 14 '17 at 17:56
@Vince, this is what you need: https://stackoverflow.com/q/37840646/3597276 – Michael Benjamin Dec 14 '17 at 18:11

Position to bottow in flex box with div

0 Answers0