调整大小时缩小边距

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>