- #1
Superposed_Cat
- 388
- 5
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).
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).
HTML:
.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>