css两行1列框布局

我一直在使用flexbox进行两行一列的布局，我使用flexbox是因为我认为css2.1无法填充box-B的剩余标记空间。在我的JSFIDLE示例中，我不能让box-C在右侧向上移动，也不能让box-B垂直伸缩并填充内容物。有人能帮我做一下这个布局吗

#容器{
背景色：红色；
宽度：100%；高度：100%
}
#三箱布局{
显示器：flex；
显示：-ms flex；
显示：-webkit flexbox；
显示：-moz flex；
身高：100%；
-ms-flex方向：列；
-webkit flex方向：列
}
.洗牌盒{
}
#方框a{
背景颜色：#f601ff；-ms弹性订单：1；-webkit弹性订单：1；
保证金权利：30%；
}
#方框b{
-ms-flex:3；
-webkit-flex:3；
-moz-flex:3；
弹性：3；
背景色：#37fe02；
保证金权利：30%；
}
#三箱布局#箱-c{
-ms-flex:3；
-webkit-flex:3；
-moz-flex:3；
弹性：3；
背景色：#02effe；
左边距：70%；浮动距：右边；
}
A.
B
C

您可以使用CSS表来实现这一点（Flexbox不是必需的）

调整浏览器大小以查看正在运行的媒体查询

（少量内容）/（大量内容）

加成

A.
/*在宽屏幕上为该div表格单元格指定50%的宽度*/
B
C
CSS
--
.集装箱{
宽度：800px；
高度：500px；
显示：表格；
文本对齐：居中；
位置：相对位置；
}
.第1行{
显示：表格行；
最大高度：425px；
背景：粉红色；
}
.row1分区{
显示：表格单元格；
宽度：50%；
}
.row2{
显示：表格行；
身高：100%；
}
.row2分区{
宽度：100%；
身高：100%；
浮动：左；
背景：绿色；
}
.row2分区+分区{
背景：水；
宽度：50%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
}
@介质（最大宽度：1024px）{
.第1行{
宽度：100%；
}
.row1分区+分区{
显示：无；
}
.row2分区{
宽度：50%；
}
.row2分区+分区{
位置：静态；
}
}

当你说

最大高度：425px

我想你的意思是，在425px之前，它应该只扩展到其内容物的高度。是吗？是的，我用了一个额外的div来填充这个空间，因为它会包含一些东西你的JS小提琴有一个太多的结束div标记，我不确定它应该是什么。你能修复它吗？它必须在这个html布局中，因为当浏览器更改时它会更改为不同的布局。我整理了我的代码。看起来不错，这样可以正常工作，但我的主要目标是让它将box-b和boc更改为两个不同的位置。当浏览器最小化到1024px时。我将更新我的示例，以显示我希望它的外观。看看我更新的图片，看看你是否可以让它这样做，所以我让它看起来像这样，这很好。我如何将其更改为我需要的其他布局是的，这就是我要找的感谢堆。我只是想知道CSS-div+div中的+符号是什么意思

#container {
    background-color:red;
    width:100%; height:100%
}

#three-box-layout {
    display:flex;
    display:-ms-flex; 
    display:-webkit-flexbox; 
    display:-moz-flex; 
    height:100%;
    -ms-flex-direction:column;
    -webkit-flex-direction:column
}

.shuffle-box {

}
#box-a {
    background-color:#f601ff; -ms-flex-order:1; -webkit-flex-order:1;
    margin-right:30%;   
}
#box-b {
    -ms-flex:3;
    -webkit-flex:3;
    -moz-flex:3;
    flex:3;

    background-color:#37fe02;
    margin-right:30%;
}
#three-box-layout #box-c {
    -ms-flex:3;
    -webkit-flex:3;
    -moz-flex:3;
    flex:3;

    background-color:#02effe; 

    margin-left:70%; float:right;

}


<div id="container">
    <div id="three-box-layout">
        <div id="box-a" class="shuffle-box">
            <div style="height:425px; background-color:pink">A</div>                
        </div>
        <div id="box-b">B</div>
        <div id="box-c">C</div>
    </div>    
</div>

<div class="container">
    <div class="row1">
        <div>A</div>
        <div></div> /* give this div table cell 50% width on wide screens */
    </div>
    <div class="row2">
        <div>B</div>
        <div>C</div>
    </div>
</div>

CSS
--

.container {
    width: 800px;
    height: 500px;
    display:table;
    text-align: center;
    position: relative;
}
.row1 {
    display:table-row;
    max-height: 425px;
    background: pink;
}
.row1 div {
    display:table-cell;
    width:50%;
}
.row2 {
    display:table-row;
    height: 100%;
}
.row2 div {
    width: 100%;
    height: 100%;
    float:left;
    background: green;
}
.row2 div + div {
    background: aqua;
    width: 50%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
}
@media (max-width: 1024px) {
    .row1 {
        width: 100%;
    }
    .row1 div + div {
        display: none;
    }
    .row2 div {
        width: 50%;
    }
    .row2 div + div {
        position: static;
    }
}