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

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>

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>
Alternatively, you can use JavaScript to match two elements width's while keeping position fixed using offsetWidth.
function resizeProgress() {
const container = document.querySelector('.container');
const progress = document.querySelector('.progress');
progress.style.width = container.offsetWidth + 'px';
progress.style.left = container.offsetLeft + 'px';
}
function resizeProgress() {
const container = document.querySelector('.container');
const progress = document.querySelector('.progress');
progress.style.width = container.offsetWidth + 'px';
progress.style.left = container.offsetLeft + 'px';
}
resizeProgress();
.container {
position: relative;
display: flex;
width: 500px;
height: 1200px;
}
.left {
flex: 1;
background: blue;
}
.right {
flex: 1;
background: yellow;
}
.progress {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: gray;
}
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="progress">I'm progress bar</div>