CODEWITHSUNDEEP
htmlcss
Patrickkx
Patrickkx

Reputation: 1870

Enable scroll in specified div?

I have following situation. Container c has fixed property. It's always 100% height. Not moving.

Container b has dynamic height.

Container a (body) can't have scrollbar visible at all.

Question: How to force the scrollbar from body to disappear, but the scrollbar in container b to appear? Thanks!

.a {
  display: flex;
  height: 300px;
}

.b,
.c {
  width: 50%;
}

.b {
  background: blue;
  height: 600px;
  overflow-y: scroll;
}

.c {
  background: green;
  height: 300px;
  position: fixed;
  right: 0;
}
<div class='a'>
  <div class='b'>
  </div>
  <div class='c'>
  </div>
</div>

Upvotes: 0

Views: 45

Answers (1)

Sean Kelly
Sean Kelly

Reputation: 991

Credit to SirExotic

Your .b container needs content that exceeds the height of b to activate the scroll bar.

body {
  overflow-y: hidden; /* added */
}

.a {
  display: flex;
  height: 300px;
}

.b,
.c {
  width: 50%;
}

.b {
  background: blue;
  height: 600px;
  overflow-y: scroll;
}

.b-content {
   min-height: 800px;
 }

.c {
  background: green;
  height: 300px;
  position: fixed;
  right: 0;
}
<div class='a'>
  <div class='b'>
    <div class="b-content">
      here I am
    </div>
  </div>
  <div class='c'>
  </div>
</div>

Upvotes: 1

Related Questions