Is there a way to adjust the content to fill in the margin space when the browser is resized smaller?
Html:
<div class="jp-sleek jp-jplayer jp-audio">
<div class="jp-gui">
<div class="jp-controls jp-icon-controls">
<div class="jp-progress">
</div>
</div>
</div>
</div>
CSS:
.jp-jplayer {
min-width: 900px;
}
.jp-sleek .jp-gui {
height: 42px;
background-color: #e5e5e5;
position: relative;
}
.jp-sleek .jp-gui .jp-controls {
height: 100%;
position: relative;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 50%;
}
.jp-sleek .jp-gui .jp-icon-controls .jp-progress {
background-color: green;
height: 100%;
width: 600px;
min-width: 240px;
position: relative;
}
Current behavior: https://i.stack.imgur.com/HY3E5.png
I am looking for a solution where the margins on the sides adjust proportionately, allowing the green bar to expand and occupy more margin space until it fills up the entire screen as it gets smaller.