css - How to make position fixed item same width as flex parent

Question

I want the fixed progress bar have same width as the yellow container and always positioned at the bottom of screen which overlapping on top of yellow container with CSS.

I have try to using width: inherit in the fixed child but the yellow parent do not have width so it doesn't work.

.container {
  display: flex;
  width: 500px;
  height: 1200px;
}

.left {
  flex: 1;
  background: blue;
}

.right {
  flex: 1;
  background: yellow;
}

.progress {
  position: fixed;
  background: gray;
  bottom: 0;
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">

      <div class="progress">I'm progress bar</div>
  </div>
</div>  

question from:https://stackoverflow.com/questions/65546469/how-to-make-position-fixed-item-same-width-as-flex-parent

Answer 1

Position fixed will be fixed to the page's scroll position and should not be used as a child of a static element.

Instead, you should set position to absolute on the progress bar, and position relative on the container.

.container {
  position: relative;
}

.child {
  position: absolute;
  width: 100%;
  left: 0;
}

.container {
  position: relative;
  display: flex;
  width: 500px;
  height: 100px;
}

.left {
  flex: 1;
  background: blue;
}

.right {
  flex: 1;
  background: yellow;
}

.progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: gray;
}

<div class="container">
  <div class="left">
  </div>

  <div class="right">
    <div class="progress">I'm progress bar</div>
  </div>
</div>