调整div大小以匹配其他div的空格

Question

基本上我想要做的是将固定宽度的一个div粘贴到右侧，将固定高度的一个div粘贴到底部并使用一个div填充空格离开了。第三个div应该自动包装文本，其他div应该调整它们各自的高度和宽度到容器。

这是我到目前为止有： https://jsfiddle.net/u0owp3jy/1/

body { 
 
     background-color: black; 
 
     box-sizing: border-box; 
 
    } 
 

 
    #wrapper { 
 
     display: table; 
 
     width: 50%; 
 
     height: 300px; 
 
     margin-top: 10px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
     border: solid; 
 
     border-width: 3px; 
 
     border-color: red; 
 
    } 
 

 
    #flex { 
 
     background-color: blue; 
 
     /*width: calc(100% - 170px);*/ 
 
     width: auto; 
 
     float: left; 
 
     display: table-row; 
 
     height: 100%; 
 
     padding: 10px; 
 
     overflow-y: auto; 
 
    } 
 

 
    #static-left { 
 
     background-color: yellow; 
 
     float: right; 
 
     display: table-row; 
 
     height: 100%; 
 

 
     width: 140px; 
 
     border-left: solid; 
 
     border-width: 3px; 
 
     border-color: red; 
 
     overflow-y: auto; 
 
    } 
 

 
    #static-bottom { 
 
     display: table-row; 
 
     background-color: green; 
 
     height: 50px; 
 
     width: 100%; 
 
     border-top: solid; 
 
     border-width: 3px; 
 
     border-color: red; 
 
    }

<div id="wrapper"> 
 
     <div id="flex"></div> 
 

 
     <div id="static-left"></div> 
 

 
     <div id="static-bottom"></div> 
 
    </div> 
 

 

这样做的事情是，以获得正确的宽度为灵活的div，我需要使用计算（ ）这是坏的，另一件事是，底部div的边界不显示。

另外，如果您显然有width: auto;，则textwrapping不起作用。 如果可能，我想只用CSS做到这一点。它也应该在移动浏览器上工作。

Answer 1

请尝试以下解决方案。我用flexbox解决了这个问题。另外我为你的CSS做了一些优化，以获得更清洁和更好的CSS代码。

body { 
 
    background-color: black; 
 
} 
 
.top-wrapper { 
 
    align-items:stretch; 
 
    align-self:flex-start; 
 
    display:flex; 
 
    flex-direction:row; 
 
    height:100%; 
 
    max-height:250px; 
 
    width:100%; 
 
} 
 
#wrapper { 
 
    align-items:stretch; 
 
    border:3px solid #f00; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap:nowrap; 
 
    height:300px; 
 
    margin:10px auto 0; 
 
    overflow:hidden; 
 
    width:50%; 
 
} 
 
#flex { 
 
    background-color:blue; 
 
    flex-grow:1; 
 
    overflow:auto; 
 
    padding:10px; 
 
    word-wrap:break-word; 
 
} 
 
#static-left { 
 
    background-color:yellow; 
 
    border-left:3px solid #f00; 
 
    overflow-y:auto; 
 
    width:140px; 
 
} 
 
#static-bottom { 
 
    background-color:green; 
 
    border-top:3px solid #f00; 
 
    box-sizing:content-box; 
 
    height:50px; 
 
    width:100%; 
 
}

<div id="wrapper"> 
 
    <div class="top-wrapper"> 
 
    <div id="flex"> 
 
     asdddddddddddd dddd dfdfd dfdfdfd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
    </div> 
 
    <div id="static-left"> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
    </div> 
 
    </div> 
 
    <div id="static-bottom"> 
 
    asd<br/> 
 
    asd<br/> 
 
    asd<br/> 
 
    asd<br/> 
 
    </div> 
 
</div>

在这里你可以找到小提琴：https://jsfiddle.net/sebastianbrosch/0ypmw3xz/