调整大小时的收缩边距

Question

当浏览器调整大小时，如何让内容占用边距空间？

http://jsfiddle.net/denWG/62/

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; 
} 

下面是它的那一刻：

我要上左，右页边距缩小和格力随着屏幕尺寸变小，屏幕尺寸变得更大并占用更多的余量空间，直到100％。

Answer 1

您需要设置width: 100%;到.jp-jplayer和min-width: 450px到.jp-sleek .jp-gui .jp-controls：

.jp-jplayer { 
 
    width: 100%; 
 
} 
 

 
.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%; 
 
    min-width: 450px; 
 
} 
 

 
.jp-sleek .jp-gui .jp-icon-controls .jp-progress { 
 
    background-color: green; 
 
    height: 100%; 
 
    width: 600px; 
 
    min-width: 240px; 
 
    position: relative; 
 
}

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