CSS:当用户向上调整div大小时，如何在容器内获得响应div的滚动条

Question

当用户向上调整滚动条的大小时，我正在尝试使滚动条响应(我的高度)作为div在container中的响应，如果您现在看到滚动消失了，箭头也消失了。

我能不能让这两个卷轴在我向上调整尺寸的时候得到响应而不是消失呢？

我的意思是总是被用户看到，用箭头来浏览文本吗？

​

​

​

​

上面的图片显示当用户向上调整浏览器大小时箭头消失的位置，所以我希望我的绿色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>

小提琴手：https://jsfiddle.net/q7kjm9pn/

Answer 1

根据我的评论，这是我在自举上的答案。我在下面的片段中添加了注释，这样您就可以看到样式正在做什么。

​

/* 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>

​

Answer 2

要使滚动条始终可见，可以使用以下代码：

/*Scroll bar nav*/
::-webkit-scrollbar {
    width: 12px !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: #dddddd;    
}

但是，如果有足够的空间不需要滚动，拇指就会消失。

Answer 3

我想这会管用的。您也可以使用拇指的样式。

::-webkit-scrollbar {
    width: 12px !important;
}
::-webkit-scrollbar-track {
    background: #dddddd;    
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}