调整 div 大小以匹配其他 div 留下的 space

Question

基本上我想做的是在右侧粘贴一个固定宽度的div，在底部粘贴一个固定高度的div，然后有一个div填写剩下的space。第三个 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;
    margin-left: auto;
    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 的正确宽度，我需要使用 calc()，这很糟糕，另一件事是，底部的边框 div不显示。

此外，如果您显然有 width: auto;，文本换行将不起作用。如果可能的话，我只想用 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>

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

调整 div 大小以匹配其他 div 留下的 space

Adjust div size to match space left by other divs

html

css

flexbox