Raduken Raduken - 4 months ago 20
HTML Question

CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

I am trying make scrollbars responsive (my height) for my

div
inside the
container
when the user resizes it upwards, if you see right now when it happen the scroll disappear and the arrows too.

Can I make these two scrolls get responsive and not disappear when I resize it upwards?

I mean always be seen by the user, to navigate the text using the arrows?

enter image description here

enter image description here

The images above show where arrows disappear when the user resizes the browser upwards, so I want for my green div be responsive and the arrows always be displayed.

Edit: the width is fine I am trying fix the height to be responsive when the user resize it from the bottom to up understand?

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

As per my comments, here is my answer in bootply. I have added comments to the snippet below so you can see what the styles are doing

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

Comments