CODEWITHSUNDEEP
htmlcssscroll
Marko Zadravec
Marko Zadravec

Reputation: 8740

CSS : Only one div scrollable

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>

Upvotes: 1

Views: 141

Answers (2)

Udhay Titus
Udhay Titus

Reputation: 5869

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>

Upvotes: 2

vinay choudhary
vinay choudhary

Reputation: 184

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>

Upvotes: 2

Related Questions