div overflow-x child使用父容器宽度调整大小

Question

我有一个1100px-width div通用容器，我打电话给（A），在我的应用程序中调整为925px。另外，我有一个div，里面有更多的div：一个有静态宽度（200px），我打电话给（B）而另一个没有，但有一个水平滚动条，我称之为（C）。

我希望当普通容器调整大小（A）时，div（C）也会调整大小并保留其滚动条。

到目前为止，我已经想出了这个jsfiddle，但我无法弄清楚我做错了什么。

Pd：我使用了不同的模拟度量 n。

¿如何让div子（C）调整为一般容器（A）宽度？

Answer 1

最新更新 的 fiddle

＆＃13;

＆＃13;

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.container{
    height:100px;
}
.left{
    width:100px;
    height:100px;
    background-color:green;
    float: left;
}
.right{
    overflow-x:auto;
    background-color:red;
    width: 100%;
    min-height: 100px;
}
.content{
    width:600px;
    position :relative;
}
.wrap{
   overflow: hidden;
    padding-left: 10px;
}

＆＃13;

<div class="container">
    <div class="left">
        
    </div>
    <div class="wrap">
        <div class="right">
           <div class="content">
                CONTENT   
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

（C）不应调整大小，但要有一定宽度（超过900px，以获得滚动条。）。容器（A）进行尺寸调整，最小宽度：925px

<强>更新 事实证明它有点复杂： http://jsfiddle.net/p7perzc6/

.a {
    border: 1px solid #aaa;
    width : 800px;
    height: 200px;
}
.b {
    width: 100px;
    background-color: green;   
     height: 200px;
    float: left;
}
.c {        
    background-color: orange;
 height: 200px;
    margin-left: 101px;
    float: left; 
    overflow-x: scroll;
    width: 900px;
    position: fixed;        
}