html - CSS:当用户向上调整它的大小时如何让滚动条响应容器内的div

Question

我正在尝试让滚动条响应 (my height) 当用户向上调整它的大小时 container 内的 div ，如果你看到现在，当它发生时，滚动消失了，箭头也消失了。

我可以让这两个卷轴在我向上调整大小时不消失吗？

我的意思是总是被用户看到，使用箭头导航文本？

上图显示了当用户向上调整浏览器大小时箭头消失的位置，因此我希望我的绿色 div 能够响应并且始终显示箭头。

编辑:宽度很好我正在尝试修复高度以在用户从底部调整到顶部时响应理解？

CSS:

html,
body {
  background-color: palette(dark-white);
  font: $font-weight--normal $font-size-root/#{$line-height-base} $font-family--primary;
  // height: 100%;
  width: 100%;
  border:1px solid red;
  overflow-y: hidden;
}

.sidebar-left-test {
    height:500px;
    width:30%;
    border:1px solid green;
    overflow-y:scroll;
}

.content{
    height: 500px;
    width:70%;
    border:1px solid black;
    overflow-y:scroll;
}

HTML:

<div class="container-fluid">
  <div class="md-col-12">
    header
  </div>
  <div class="col-md-4">
    <div class="sidebar-left-test">
      md-4
      <br> md-4
      <br> md-4
      <br> md-4
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="content">
      content
    </div>
  </div>
</div>

jsfiddle:https://jsfiddle.net/q7kjm9pn/

Answer 1

根据我的评论，这是我在 bootply 中的回答.我在下面的代码片段中添加了评论，这样您就可以看到样式在做什么

/* CSS used here will be applied after bootstrap.css */

html,
body {
  background-color: palette(dark-white);
  height:100%;
  width:100%;
  border:1px solid red;
  overflow-y:hidden;
}
.sidebar-left-test {
  width: 30%;
  border: 1px solid green;
  overflow-y: scroll;
}
.content {
  width: 70%;
  border: 1px solid black;
  overflow-y: scroll;
}

/* new styles */
.container-fluid {
  display: flex;          /* make outer container flex */
  flex-direction: column;  /* make md col 12 divs into 2 rows */
  flex-wrap: wrap;
  height: 100%;           /* make the height of the container 100% of the body if less than max height */
  max-height: 600px;      /* max height of the container */
}
.md-col-12 {
  width: 100%;            /* make sure these rows take up 100% width*/
}
#header {
  flex-grow: 0;   /* this is so that the header is as high as it's content */
}
#body {
  flex-grow: 1;   /* this makes the body take up the rest of the height inside the container */
  display: flex;  /* make this flex as well so we can get the two child divs to be 100% height */
  flex-direction: row;  /* make the child divs into columns */
}
#body > div,
#body > div > div {
  /* these make the child divs and their children grow to fill the height of the columns in the body */
  display: flex;  
  flex-grow: 1;
}

<div class="container-fluid">
  <div class="md-col-12" id="header">
    header
  </div>
  <div class="md-col-12" id="body">
    <!-- I have added this wrapping div for the body -->
    <div class="col-md-4">
      <div class="sidebar-left-test">
        md-4
        <br>md-4
        <br>md-4
        <br>md-4
        <br>
      </div>
    </div>
    <div class="col-md-8">
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>