Why my scrollbar track becomes transparent? - css

I faced very strange effect. As soon as I add those two lines in scss my scrollbar track becomes transparent in Chrome (Firefox okay). I know many people looking for that but in my case it is undesirable.
div::-webkit-scrollbar{width:0.4rem;}
div::-webkit-scrollbar-thumb{background-color:red;}
Furthermore, it happens only if I change width of the scrollbar. If I remove the first line in the code above, thumb color stops to be respected and the entire scrollbar becomes default.
The same I see in the Chrome inspect panel: no other styling elements to the scrollbar, if I uncheck width, red color disappears but still present as valid in the inspect.
Any ideas?


/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #ccc;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #454;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>


Here is the cross-browser support scrollbar CSS
/*============================
CrossBrowser ScrollBar
============================*/
* {
scrollbar-width: thin;
scrollbar-color: rgba(89, 203, 157, 0.8) rgba(0, 0, 0, 0.099);
}
::-webkit-scrollbar
{
width: 5px; /* for vertical scrollbars */
height: auto; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track
{
background: rgba(0, 0, 0, 0.099);
}
::-webkit-scrollbar-thumb
{
background: rgba(89, 203, 157, 0.8);
border-radius: 30px;
}

Related

How to custom scroll bar with default arrow in css

I want to customize the width and height of scrollbar but with default arrow
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
I didnt get default arrow. can anybody suggest here

::-webkit-scrollbar-thumb {
background-color: #b0b0b0;
background-clip: padding-box;
border: 0.05em solid #eeeeee;
border-radius: 10px;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: #bbbbbb;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
border-width: 8px 0 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #555555 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #777777 transparent transparent transparent;
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
border-width: 8px 8px 8px 0;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
<div style="color:black;height:300px;width:600px;padding:8px;font-size:22px;overflow-y:scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam ac tortor vitae purus. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Nullam ac tortor vitae purus faucibus
ornare. Risus quis varius quam quisque id diam vel quam. In egestas erat imperdiet sed euismod nisi porta. Elementum eu facilisis sed odio morbi quis commodo odio aenean. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Mattis
pellentesque id nibh tortor id. Ullamcorper a lacus vestibulum sed arcu non. Lectus mauris ultrices eros in cursus turpis. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. Ultricies mi eget mauris pharetra et ultrices. Id aliquet risus
feugiat in. Quam vulputate dignissim suspendisse in est. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Sed arcu non odio euismod lacinia. Sed blandit libero volutpat sed cras ornare arcu dui. Ultrices tincidunt arcu non sodales
neque sodales. Arcu dictum varius duis at consectetur lorem donec massa sapien. Vitae purus faucibus ornare suspendisse sed. Morbi tristique senectus et netus et malesuada fames. Adipiscing diam donec adipiscing tristique. Euismod lacinia at quis risus
sed. Pulvinar sapien et ligula ullamcorper malesuada proin libero.
</div>
You have to use
::-webkit-scrollbar-thumb for thumb holder
::-webkit-scrollbar-button:single-button,:vertical:decrement,:vertical:increment,:horizontal:decrement,:horizontal:increment, for buttons

Note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior to version 79. check caniuse and MDN CSS Scrollbars
for more ways to create arrows : How to add arrows with -webkit-scrollbar-button
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background-color: rgb(64, 64, 64);
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgb(96, 96, 96);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: rgb(112, 112, 112);
}
/* Handle on active*/
::-webkit-scrollbar-thumb:active {
background-color: rgb(128, 128, 128);
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: rgb(64, 64, 64);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 12px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 12px;
width: 16px;
background-position: center 2px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}
<p></p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
res
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Display: Flex not adjusting flex items height with fluidity based on content inside the flex item [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I am trying to achieve the fluid height of the .flex-item containers according to the content pushed into them , beside also maintaining the display: flex behavior in it such that there is no whitespace left horizontally or vertically between the .flex-item and packing them beside each other in all the space provided.
As you run the code and observe the output i do not want to affect my second .flex-item due to the lengthy content in the first .flex-item, it should stick to the height of it's content and yet be aligned to other flex-items.
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>

The align-items property set to flex-start will resolve this issue.
However, if you want the items lower items to fill out the empty space in the right column, you will need to use a Javascript library such as Masonry (https://masonry.desandro.com/).
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>

<div> with absolute position in the viewport when scrolling the page vertically

I created JANITOR which:
Inserts a navigation tree for modules, packages and types (interfaces, classes, enums, exceptions, errors, annotations) into the Javadoc pages of Java 11+.
The main elements involved are:
...
<div id="nav&mainContainer" style="display: flex;">
<div id="nav" style="width: 25em; height: 386px; border-right: 1px solid; overflow-y: scroll;">
<main role="main" style="flex: 1 1 0%;">
...
How can I achieve that the navigation (<div id="nav" ...>) stays always at the same place left of the viewport if the page is scrolled so that visually only <main> is scrolled?
UPDATE
Using:
<div id="nav" style="position:fixed; ...>
as proposed in an answer:

I created a sample example:
.test {
width: 300px;
height: 100px;
background-color: red;
overflow-y: scroll;
}
.test1 {
position: absolute;
left: 10px;
color: #fff;
font-size: 30px;
background-color: #000;
height: auto;
width: 70px;
}
.test2 {
padding-left: 75px;
}
<div class="test">
<div class="test1">Hello Hello Hello
</div>
<div class="test2">
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
</div>
You could try those code from codepen.io/pen that what seen. I hope it'll show a path.

try using the css styling "fixed"
<div id="nav" style="position:fixed; width: 25em; height: 386px; border-right: 1px solid; overflow-y: scroll;">
https://www.w3schools.com/cssref/pr_class_position.asp

If you want to fix any div, you could use sticky, fixed or absolute. According to your last update, you could push with padding/margin for your needs.
My advice to you, you could inspect the Javadoc pages of Java 11+. You will find easyly your answer.
When you could investigate to find your questions that be careful html element position status and left/right or padding/margin state.
Padding : The CSS padding properties are used to generate space around an element's content, inside of any defined borders
Margin : The CSS margin properties are used to create space around elements, outside of any defined borders.
Source : CSS Padding CSS Margin

Stack sticky element after other sticky element with dynamic height

I need to stack few sticky header elements like this:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html
There are solutions for this question in stackover in here. But in my case my sticky headers have dynamic heights. Therefore not possible to hard code top position for stick headers. My code is like below:
html
<div class="sticky-header1">
Header 1 with dynamic height
</div>
<div>
Header 1 content
</div>
<div class="sticky-header2">
Header 2 with dynamic height
</div>
<div>
Header 2 content
</div>
css
.sticky-header1,
.sticky-header2
{
position: sticky;
}
Is it possible to set stacked sticky header in this scenario? Pure CSS solution is preferred.

maybe u need to use javascript like this:
firstdiv =document.querySelector(".first");
secondiv =document.querySelector(".second");
thirdiv = document.querySelector(".third");
const fheight = firstdiv.offsetHeight;
const sheight = secondiv.offsetHeight;
secondiv.style.top= `${fheight}px`;
thirdiv.style.top= `${fheight+sheight}px`;
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
position:sticky;
top:0;
}
.second {
height:60px;
background:blue;
position:sticky;
}
.third {
height:80px;
background:green;
position:sticky;
}
<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

I don't think you can achieve that only with CSS. Even if you ever managed to it will be very fragile and you need to have into account that there's some browsers that won't accept the sticky position! I would go with a javascript based solutions instead

It is not possible using pure CSS, you when if the known or constant height element and not increase element then it's possible (it's not good). Another way you use simple javascript and just calculation for element height and set CSS position top property.

Set height of floated elements to 100% of the browser window

I have the following HTML code:
<html>
<body>
<section>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</section>
<section></section>
</body>
</html>
CSS:
html,body {
height: 100%;
}
body {
background: #0f0;
}
body:after {
content: "";
display: table;
clear: both;
}
body > section:first-of-type {
width: 300px;
background: #f00;
float: left;
}
body > section:last-of-type {
width: 300px;
height: 100%;
background: #00f;
float: right;
}
Also, here's the live example: http://jsfiddle.net/f9usmbkv/
As you can see from the example, section on the right is set at 100% height, but it doesn't match the height of the browser window, so can I make both sections have 100% height of the browser window and not the 100% height of body element?
Can I do this only with CSS or do I have to use JavaScript?
Update:
I had a similar question asked not a while ago:
Set height of floated elements to 100% of the browser window
However, for this project using display:flex is out of the question, since I have to support browsers that don't use it yet, but have a look at that question, it might help you.

an alternative to using tables is using jquery:
$(document).ready(function(){
var docH = $(document).height();
console.log(docH);
$('.right-col').height(docH-8);
});
heres the fiddle: http://jsfiddle.net/f9usmbkv/6/ . the 8 is to offset the padding on the body.

I dont know if this is the approach you'd like to use, but this approach works: using tables
css:
.table {
display: table;
width:100%;
}
.table section {
display: table-cell;
width: 100vw - 600px;
padding: 10px;
}
.table section:nth-child(even) {
background: #ccc;
}
.table section:nth-child(odd) {
background: #eee;
}
<body>
<div class="table">
<section style="background:red; width:300px;">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </section>
<section></section>
<section style="background:blue; width:300px;"></section>
</div>
</body>
heres the fiddle: http://jsfiddle.net/f9usmbkv/5/

You have to do a css-reset. Elements have intrinsic margins and paddings. Hence the space around your sections. By doing a reset you start with a clean slate. Also, doing a box-sizing will ensure that the widths are calculated taking margins and borders into account cross-browser.
And then set overflow:hidden on body and overflow:auto on your sections.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
background: #0f0;
}
body:after {
content:"";
display: table;
clear: both;
}
body > section:first-of-type {
width: 300px;
height: 100%;
background: #f00;
float: left;
overflow: auto;
}
body > section:last-of-type {
width: 300px;
height: 100%;
background: #00f;
float: right;
overflow: auto;
}
<section>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </section>
<section></section>

I don't think you can do that the way you think about it (not by using height:100% property). But there is a workaround called "Faux Columns" which is kind of visual way of achieving effect you want.
This article here written by Dan Cederholm, describes this technique and might be help to you.
Generally - you are specifying a background image on the parent element which is then repeated on y axis. This creates an impression of two equally tall columns. The aim here is to prepare right image, knowing the width of your columns.

Use Grace Lee answer or try with Flexbox:
body {
margin: 0
}
.flex-outside {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-inside {
display: flex;
flex-direction: row;
flex-grow: 2;
}
.left {flex: none; background-color: red;}
.center {flex: auto; background-color:green;}
.right {flex: none; background-color: blue;}
Demo: JSFiddle

Resources