Overlay on a flexbox while keeping responsivness

[Superposed_Cat]

With the below code, I am trying to make an overlay for a "progress bar" with text, I need the flex to make it responsive,
BUT the only way I know to make an overlay is to use things like fixed or absolute position, which breaks the layout, is there a way to keep it responsive and have an overlay with dynamic width (for displaying progress).

.master{
  display: flex;
}
.item{
    border-right: 1px solid black;
    padding-right: 5px;
    display: inline-block;
    text-align: center;
    padding: 15px 0;
    flex-grow: 1;
    flex-basis: 0;
}
<div style='border:1px solid black;margin: 0 auto;'>
  <div class='master'>
    <span class="item">a</span>
    <span class="item">b</span>
    <span class="item">c</span>
  </div>
  <div id='overlay' style='background-color:red;opacity:0.7;width:100%;height:100%;'></div>
</div>

 

[pbuk]

Not sure what you mean by 'breaking the layout'? Have you tried position: relative; on the outer div and position: absolute; top: 0; on the #overlay div? It will be easier to work out what is going on if you use CSS class selectors for all elements rather than the mix of id selectors, class selectors and inline CSS you currently have.

 

[DaveC426913]

Yep. position relative on the container div

If you put a bare-bones example in jsfiddle or plunkr we could see what's happening.

 

[pbuk]

If you put a bare-bones example in jsfiddle or plunkr we could see what's happening.

Actually I had some time free on the train so did exactly that, fixed and tidied up a bit. I also implemented the "overlay" as an underlay which I think gives a better effect - see it all at https://jsfiddle.net/pbinuk/py3L92z0

 

[DaveC426913]

Very nice.

If you are of-a-mind, I suspect you could skip the JavaScript and do this in CSS only, using a combination of a background-gradient and a transition delay.