CSS : Only one div scrollable

Question

I am trying to have only one div to be scrollable, but I don't know to do that.

I would like for h2 and c (black and blue) to stay as they are, and only d ( pink) is scrollable.

Right now, the whole line is scrollable.

 .a { background-color:red; width: calc(100vw - 3rem); overflow:scroll; } .b { background-color:green; display: inline-flex; height:3rem; } .c { background-color:blue; display: inline-flex; width:3rem; height:3rem; } .d { background-color:pink; display: inline-flex; width:133rem; height:3rem; } h2 { background-color:black; user-select: none; font-weight:600; font-size: 1.5rem; height: 1.9rem; width: 4.1rem; margin-top: auto; margin-bottom: auto; height:3rem; } 

 <div class='a'> <div class='b'> <h2></h2> <div class='c'></div> <div class='d'></div> </div> </div> 

Answer 1

use position:fixed; for h2 and for .c use position:fixed;left:4.1rem; because your h2 width is 4.1rem so use left:4.1rem

 .a { background-color:red; width: calc(100vw - 3rem); overflow:scroll; } .b { background-color:green; display: inline-flex; height:3rem; } .c { background-color:blue; display: inline-flex; width:3rem; height:3rem; position:fixed; left:4.1rem; } .d { background-color:pink; display: inline-flex; width:133rem; height:3rem; } h2 { background-color:black; user-select: none; font-weight:600; font-size: 1.5rem; height: 1.9rem; width: 4.1rem; margin-top: auto; margin-bottom: auto; height:3rem; position:fixed; left:0rem; } 

 <div class='a'> <div class='b'> <h2></h2> <div class='c'></div> <div class='d'></div> </div> </div> 

Answer 2

try this

 .a { background-color:red; width: calc(100vw - 3rem); overflow:scroll; } .b { background-color:green; display: inline-flex; height:3rem; } .c { background-color:blue; display: inline-flex; width:3rem; height:3rem; } .d { background-color:pink; display: inline-flex; width:133rem; height:3rem; } h2 { background-color:black; user-select: none; font-weight:600; font-size: 1.5rem; height: 1.9rem; width: 4.1rem; margin-top: auto; margin-bottom: auto; height:3rem; } 

 <div class='a'> <div class='b'> <h2></h2> <div class='c'></div> <div class='d'></div> </div> </div> 

 .a { background-color:red; width: 100%; } .b { background-color:green; display: flex; flex-wrap:wrap; height:3rem; } .c { background-color:blue; width:3rem; height:3rem; } .d { background-color: pink; width: calc(100% - 7.1rem); height: 3rem; overflow-x: auto; } .d div{ width: 133rem; overflow: auto; height: 3rem; } h2 { background-color:black; user-select: none; font-weight:600; font-size: 1.5rem; height: 1.9rem; width: 4.1rem; margin-top: auto; margin-bottom: auto; height:3rem; } 

 <div class='a'> <div class='b'> <h2></h2> <div class='c'></div> <div class='d'><div></div></div> </div> </div>