I have a list with text that needs to be cutted off in each item, but when i do
white-space: nowrap;
the item stretches and horizontal scroll bar appears. How to fit cutted text in?
.wrapper {
display: flex;
flex-direction: row;
}
.wrapper-column {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid #00f;
}
.main-header {
position: sticky;
top: 0;
height: 70px;
border: 1px solid #f0f;
background-color: #fff;
}
.main-content {
height: 1000px;
padding: 15px 25px;
border: 1px solid #000;
}
.sidebar {
position: sticky;
top: 0;
box-sizing: border-box;
flex-shrink: 0;
height: 100vh;
width: 250px;
border: 1px solid #0ff;
}
.content-section {
border: 1px solid #b22222;
}
.content {
padding: 5px;
}
.content-list {
box-sizing: border-box;
display: flex;
flex-direction: row;
padding: 7px 20px;
margin: 0;
height: 40px;
border: 1px solid #3cb371;
list-style: none;
}
.content-list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width:0;
}
<div class="wrapper">
<aside class="sidebar"></aside>
<div class="wrapper-column">
<header class="main-header"></header>
<main class="main-content">
<section class="content-section">
<div class="content">
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem libero aspernatur voluptatem, voluptate voluptas enim voluptatibus tempore amet expedita excepturi facere, possimus debitis nam earum!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ratione tempore sint! Suscipit rerum facilis consequuntur, sequi aliquam reiciendis, in quia fugiat nostrum, numquam vel.</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit porro facilis numquam culpa illum amet minima, delectus accusantium consectetur cumque repellendus id officia laudantium odio!</li>
</ul>
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nam praesentium a hic, molestias ipsam sed nulla, non, quaerat necessitatibus unde. Similique quod illum consequatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quo adipisci iusto accusantium sed laboriosam officiis placeat eaque veniam animi, facere mollitia repudiandae rerum alias.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint, architecto beatae esse culpa deleniti quaerat hic, blanditiis provident natus quam doloribus voluptatibus similique ea!</li>
</ul>
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tempore laudantium voluptatem dolor quod harum facilis voluptas consectetur minus, nulla, excepturi illum exercitationem eos ipsum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam eveniet debitis, voluptatibus velit, quo aut quos magnam consequatur natus quisquam dicta quidem, illo ipsa.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolor ipsa, numquam veritatis ut mollitia distinctio. Magnam nobis expedita asperiores dolorum eaque sapiente, tenetur quisquam!</li>
</ul>
</div>
</section>
</main>
</div>
</div>
https://jsfiddle.net/nz7ubw2p/
Instead of using width:100% you should consider flex-grow:1 to fill the remaining space and min-width:0 to disable the auto width and allow the shrink.
.wrapper {
display: flex;
flex-direction: row;
}
.wrapper-column {
display: flex;
flex-direction: column;
flex-grow:1;
min-width:0;
border: 1px solid #00f;
}
.main-header {
position: sticky;
top: 0;
height: 70px;
border: 1px solid #f0f;
background-color: #fff;
}
.main-content {
height: 1000px;
padding: 15px 25px;
border: 1px solid #000;
}
.sidebar {
position: sticky;
top: 0;
box-sizing: border-box;
flex-shrink: 0;
height: 100vh;
width: 250px;
border: 1px solid #0ff;
}
.content-section {
border: 1px solid #b22222;
}
.content {
padding: 5px;
}
.content-list {
box-sizing: border-box;
display: flex;
flex-direction: row;
padding: 7px 20px;
margin: 0;
height: 40px;
border: 1px solid #3cb371;
list-style: none;
}
.content-list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width:0;
}
<div class="wrapper">
<aside class="sidebar"></aside>
<div class="wrapper-column">
<header class="main-header"></header>
<main class="main-content">
<section class="content-section">
<div class="content">
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem libero aspernatur voluptatem, voluptate voluptas enim voluptatibus tempore amet expedita excepturi facere, possimus debitis nam earum!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ratione tempore sint! Suscipit rerum facilis consequuntur, sequi aliquam reiciendis, in quia fugiat nostrum, numquam vel.</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit porro facilis numquam culpa illum amet minima, delectus accusantium consectetur cumque repellendus id officia laudantium odio!</li>
</ul>
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nam praesentium a hic, molestias ipsam sed nulla, non, quaerat necessitatibus unde. Similique quod illum consequatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quo adipisci iusto accusantium sed laboriosam officiis placeat eaque veniam animi, facere mollitia repudiandae rerum alias.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint, architecto beatae esse culpa deleniti quaerat hic, blanditiis provident natus quam doloribus voluptatibus similique ea!</li>
</ul>
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tempore laudantium voluptatem dolor quod harum facilis voluptas consectetur minus, nulla, excepturi illum exercitationem eos ipsum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam eveniet debitis, voluptatibus velit, quo aut quos magnam consequatur natus quisquam dicta quidem, illo ipsa.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolor ipsa, numquam veritatis ut mollitia distinctio. Magnam nobis expedita asperiores dolorum eaque sapiente, tenetur quisquam!</li>
</ul>
</div>
</section>
</main>
</div>
</div>
Related
Currently my scrollbar is stuck to the border of the div (which has an overflow: "scroll" property) and changing the margin or padding of the scrollbar doesn't do anything. The scrollbar also shouldn't be as tall as the div itself, like 80% of it, but changing the height of it also doesn't work.
Below are pictures of what I'm going for and what it looks like currently and also the CSS styles that are currently on the scrollbar:
.container::-webkit-scrollbar-track {
border-radius: 10px;
background-color: var(--white50);
}
.container::-webkit-scrollbar {
width: 12px;
background-color: transparent;
}
.container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--white);
}
You can't move the position of the scrollbar, but you can create an inner container to show the scrollbar in it. So you can have padding you want.
.container {
height: 200px;
width: 300px;
overflow: hidden;
background-color: lightgray;
padding: 20px;
}
.inner-container {
background-color: lightgray;
overflow-y: scroll;
height: 100%;
}
.inner-container::-webkit-scrollbar-track {
border-radius: 10px;
background-color: lightsalmon;
}
.inner-container::-webkit-scrollbar {
width: 12px;
background-color: transparent;
}
.inner-container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: white;
}
<div class="container">
<div class="inner-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo
eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam.
Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam.
</p>
</div>
</div>
I'm trying to show the sidebar below the header initially, which works fine when the user lands on the website, but when a user scrolls the page, the sidebar not taking the full height, basically I want to achieve sidebar to be fixed at the left once user scrolls just like shown here.
Here is my code snippet
html,
body {
height: 100%;
}
.header {
border: 1px solid black;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.body {
height: 100%;
background-color: tomato;
display: flex;
padding-bottom: 2000px;
}
.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
height: 100%;
background: black;
color: white;
/* top: 0px; */
}
.content {
padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
<div class="sidebar">SIDEBAR</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>
I removed height:100% on body and html and also .height, because there is no goal of that as they are adapting their height based on content.
Then I fixed the sidebar height to 100vh.
Now it is fixed. It only leaves at the end because you added a padding-bottom: 2000px; in your .body container.
html,
body {
/*height: 100%;*/
}
.header {
border: 1px solid black;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.body {
/*height: 100%;*/
background-color: tomato;
display: flex;
padding-bottom: 2000px;
}
.sidebar {
width: 30%;
position: -webkit-sticky;
position: sticky;
height: 100vh;
background: black;
color: white;
top: 0;
}
.content {
padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
<div class="sidebar">SIDEBAR</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>
With standard behavior of overflow: scroll the padding-bottom is in the bottom of the scrolled block. But how can I make padding-bottom fixed, so odd text will not appear right after bottom border
https://jsfiddle.net/nvg23rp8/6/
body{
background-color: green;
}
.wrapper{
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-top: 20px;
padding-bottom: 20px;
overflow-y: scroll;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.inner{
background: blue;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
CSS is all about illusions!
Make an outer container and give it some padding to give the required illusion. I couldn't get your Fiddle, so I made a new one. Here you go: https://jsfiddle.net/z9ztcstb/
.container {
position: relative;
}
.text-container {
background: red;
padding: 10px;
}
.text {
height: 100px;
/* background: green; */
overflow: scroll;
}
<div class="container">
<div class="text-container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In
quae earum recusandae beatae, optio. Incidunt velit corporis nesciunt, soluta dolor laborum eius recusandae perspiciatis. Est alias minima hic iure, incidunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam alias suscipit, quia, vitae consectetur laudantium nisi itaque odio aliquam dolorem voluptas atque, eos perspiciatis. Excepturi cumque doloribus ad, itaque tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat saepe possimus fuga consequuntur, dolorum facere harum, ullam id similique tempora magni non dolores. Praesentium esse omnis quia eaque quos!
</div>
</div>
</div>
I would suggest that you put the scroll on the inner box, this would be the most effective way of preventing unwanted overflow of text below the blue background. You could do this without the 'inner' css. Try this out. fiddle here
Hope this helps
$('.wrapper').on('scroll', function() {
$('.inner').scrollTop($(this).scrollTop());
});
body {
background-color: green;
}
.wrapper {
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-bottom: 30px;
position: fixed;
left: 10%;
top: 10%;
}
.middle {
margin: 20px;
padding: 2px 5px;
height: 90%;
overflow-y: scroll;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
this will work:
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
</div>
<div class="border">
</div>
</div>
div.wrapper {
width:340px;
height:120px;
background-color:#ccc;
overflow:auto;
position:relative;
}
div.border {
border:solid 10px red;
height:100px;
position:fixed;
width:300px;
height:100px;
top:0;
left:0;
}
div.content{
z-index:1;
margin:10px;
}
The main point is to put the border outside of the .wrapper container.
The only issue I can see here is you cannot use mouse wheel to scroll .content inside .wrapper, since it has been overlapped by .border
Here is a JSFiddle link you can see: https://jsfiddle.net/zsydyc/pw9jz5s2/3/
I think this might be helpful.
body{
background-color: green;
}
.wrapper{
height: 140px;
width: 300px;
background: transparent;
border: 1px solid #000;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
height: 100px;
}
.inner{
background: blue;
overflow-y: scroll;
height: 100%;
}
::-webkit-scrollbar {
width: .5rem;
background: inherit;
}
::-webkit-scrollbar-thumb {
background: #f00;
border-radius:.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
This question already has answers here:
flex container min-height ignored in IE
(3 answers)
Closed 5 years ago.
child divs are not taking 100% height of flex-wrap div only in IE11.
html,
body {
margin: 0;
padding: 0;
}
.flex-wrap {
display: flex;
display: -ms-flex;
min-height: 100vh;
background: #ddd;
}
.child {
border: 1px solid;
flex: 1 1;
}
<div>
<div class="flex-wrap">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
</div>
</div>
Add min-height: 100vh to your flex-items.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.flex-wrap {
display: flex;
display: -ms-flex;
background: #ddd;
}
.child {
border: 1px solid;
flex: 1 1;
min-height: 100vh;
}
<div>
<div class="flex-wrap">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
</div>
</div>
Added box-sizing: border-box; to border considered as part of height.
This is a know issue of flexbox, however one of the solution is to fix it with jquery. Something like that should work.
$(document).ready(function(){
var heightBox = 0;
$('.child').each(function(){
if($(this).height()>heightBox){
heightBox=$(this).height();
}
});
$('.child').height(heightBox);
});
html,
body {
margin: 0;
padding: 0;
}
.flex-wrap {
display: flex;
display: -ms-flex;
min-height: 100vh;
background: #ddd;
}
.child {
border: 1px solid;
flex: 1 1;
}
<div>
<div class="flex-wrap">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
</div>
</div>
So what I am trying to have is a different scrollbar for the scrollable div and a different one for the whole window. This is what I have tried to do but I haven't been able to get two different colour scroll bar.
*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}
/******************SCROLL BAR***********************/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
opacity: 0;
background-color: #d2edda;
//-border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0b602f;
}
::selection {
color: white;
background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>
</div>
</body>
</html>
So a different scrollbar for the div and a different scrollbar for the window is required.
Just like with any CSS selector, you simply need to apply the various ::-webkit-scrollbar pseudo-elements to the div element itself by specifying this within the selector:
/* This styles any scrollbar. */
::-webkit-scrollbar {
...
}
/* This styles any scrollbar which is part of a `div` element. */
div::-webkit-scrollbar {
...
}
*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}
/******************SCROLL BAR***********************/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
opacity: 0;
background-color: #d2edda;
//-border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0b602f;
}
div::-webkit-scrollbar-track {
background-color: red;
}
div::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
background: purple;
}
::selection {
color: white;
background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>
</div>
</body>
</html>