全屏（定宽+自适应）flex

全屏（定宽+自适应）flex

by DarcyAn

HTML

<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right"><div class="help-right">right</div></div>
</div>
<div class="bottom">bottom</div>
</div>

CSS

html, body, .parent {height: 100%; overflow: hidden;}
.parent {display: flex; flex-direction: column;}
.top {
  height: 100px;
  background: skyblue;
}
.middle {flex: 1;display: flex;}
.left {
  width:200px;
  background: pink;
}
.right {
  flex: 1;
  overflow: auto;
  background: snow;
}
.help-right {
  width: 1000px;
  height: 1000px;
}
.bottom{
  height: 50px;
  background: skyblue;
}