Overlay on a flexbox while keeping responsivness

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).

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>
 
1,109
201
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

Gold Member
18,294
1,904
Yep. position relative on the container div

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

DaveC426913

Gold Member
18,294
1,904
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.
 

Want to reply to this thread?

"Overlay on a flexbox while keeping responsivness" You must log in or register to reply here.

Related Threads for: Overlay on a flexbox while keeping responsivness

Replies
11
Views
285
Replies
13
Views
1K
Replies
3
Views
2K
  • Last Post
2
Replies
40
Views
2K
  • Last Post
Replies
6
Views
2K
Replies
4
Views
755
Replies
8
Views
1K
  • Last Post
Replies
4
Views
2K
Top