CODEWITHSUNDEEP
htmlcssflexbox
nischalinn
nischalinn

Reputation: 1175

align a child div to bottom inside div of flex box

I have to align a child div which is inside a div of flex box container to bottom. I tried different options like setting bottom to 0 or margin-top but none of them are working.

<style>
.flex-container {
  display: flex;
  height: 500px;
  background-color: #f1f1f1;
}
.flex-container > div {
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.vertical 
{
    box-shadow: inset 0px 4px 6px #ccc;
}
.progress {
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
}   
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar {
  box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
</style>
<div class="flex-container">
  <div class= "progress vertical" >1
    <div class="progress-bar progress-bar-info"  style="height: 35%;">
      how to align this div to bottom..... ?
    </div>
  </div>    
</div>

Upvotes: 3

Views: 862

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14433

You can add flex properties on flex-container>div like below:

.flex-container {
  display: flex;
  height: 500px;
  background-color: #f1f1f1;
}

.flex-container>div {
  color: red;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vertical {
  box-shadow: inset 0px 4px 6px #ccc;
}

.progress {
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
}

.progress-bar-info {
  background-color: #5bc0de;
}

.progress-bar {
  box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
<div class="flex-container">
  <div class="progress vertical">
    <div>1</div>
    <div class="progress-bar progress-bar-info" style="height: 35%;">Bottom</div>
  </div>
</div>

Upvotes: 3

Related Questions