vertical progress bar starts from top when it should start on the bottom-CodePudding

I'm trying to build a vertical progress bar. But when change the "height" value on the orange bar, the bar rises from the top to the bottom. I want the bar to rise from the bottom to the top. Upside down. Does anyone know, how to achieve that?

.vertical-progress-bar {
  height: 200px;
  width: 40px;
  border: 1px solid black;
}

.vertical-progress {
  height: 100px;
  width: 40px;
  background-color: orange;
}

<div >
  <div >
  </div>
</div>

CodePudding user response：

One way is to position the inner div so its bottom is on the bottom of its parent.

Note: the parent needs to be given a position too else the child will position according to its nearest ancestor which has a position.

.vertical-progress-bar {
  height: 200px;
  width: 40px;
  border: 1px solid black;
  position: relative;
}

.vertical-progress {
  height: 100px;
  width: 40px;
  background-color: orange;
  position: absolute;
  bottom: 0;
}

<div >
  <div >
  </div>
</div>