Author avatar

Vivek Kumar

Making a Single Child Div Scroll

Vivek Kumar

  • Jun 21, 2019
  • 6 Min read
  • 698 Views
  • Jun 21, 2019
  • 6 Min read
  • 698 Views
Web Development
React

Introduction

The scrolling style of an animation component is a key area where you can learn new skill sets at every level and give your animation expertise a dynamic approach. The level of animation increases once the animator reaches down to the single child component and tries to improvise its status against the parent element. The experienced professionals in this field will be well versed with this opinion and the careful measures are required to be taken when changes in the features of the child component are being made with respect to the ones possessed by the parent component. It is basically due to the fact that one slight mistake can generate errors in the functioning of the entire framework.

In this guide, our objective is to learn how to make a single child div scroll when it surpasses the height of its parent component.

A Demo to Start With

In order to make the demonstration function precisely, let us have a glance over the situation mentioned below:

There are two child divs which are nested within a parent component div in the given row-column array. The parent component is denoted by columns, whereas the rows represent the children.

Imgur

There are certain aspects that we have set up for the case, in order to avail the inference right as per the need. The upper child div is going to be of the variable height, but it's fully assured that the height of the concerned child div will be less in comparison to that of the parent div.

In the case of the lower child, it also is comprised of the variable height. It is important to note that, in certain cases, it's the height of child divs that actually result in lower child div to surpass the height that of the parent. The case that we are talking, in particular, is going to be customized to ensure that the lower child div is scrollable in nature. Do consider the fact that it is only the lower div which is meant to be scrolled without influencing the whole parent div in any way.

Now, how do we make this happen? Let us start with the HTML commands:

1
2
3
4
5
6
7
8
 <div class = "parent" >
    <div class = "child1" >
        Hello, world!
    </ div>
    <div class = "child2" >
        This div should overflow and scroll down.
    </ div>
</ div>
html

And, for the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    background-color: red;
}

.child2 {
    background-color: blue;
}
css

Here, it is advisable that the scroller for the parent component not be functional yet. It is in existence for the parent to make the whole framework look realistic. An existing yet non-functional scroller is one of the key things required to be in place to get the expected results.

The overflow only becomes functional when you give it a value which is greater than the existing one.

1
2
3
$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});
javascript

In order to include the overflow for the children, the commands to be added are as follows:

1
2
3
4
5
6
7
8
9
.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}
css

Refer the given JSFiddle for a live demo.

Using Flexbox

Apart from the solution which is highlighted above, one can also go with the solution with the application of flexbox. If you are thinking that the process with flexbox is going to be a complicated one then you could be more wrong. The process is very simple, as you can see: display: flex, flex-direction: column, and overflow: hidden for the parent as well as overflow-y: auto for the child.

1
2
3
4
5
6
7
8
9
.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollable-child {
  overflow-y: auto;
}
css

Overflow Property

The application of the overflow property to scroll the whole parent div can be seen in the code below, whose live demo can be verified on given JSFiddle:

1
2
3
4
5
6
.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}
css

If you wish to make only the second div scrollable then you are required to alter the height 30px so that child1, as well as child2 can be fit precisely with the height of the parent as well as incorporate the overflow property. The corresponding commands are shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    height: 70px;
    background-color: red;
}

.child2 {
    height: 30px;
    background-color: blue;
    overflow: auto;
}
css

You can also verify the above commands in the given JSFiddle.

Conclusion

The process of making a single child div scroll while working totally distinct from the parent div is achievable, as we have learned throughout this guide. The solutions laid down by both CSS and Flexbox have been discussed. The application of the components to create a single child scroll can be effective when all the related aspects are precisely measured.

It is advisable to follow the above-given steps and ascertain selective animation as per the need.

References

0