CODEWITHSUNDEEP
htmlcss
aprilone
aprilone

Reputation: 113

Overflow hidden scroll-y cutting off content

I've pasted the code below. It appears that the addition of the title element causes content to be cut-off from the bottom of the scroll. If I remove the title element, no content is cut off. The title shuffles down and impacts the next element.

Screenshot here

HTML

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...
  </div>
</div>

CSS

.wrapper {
  border: 0;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  height: 100%;
}

If a box shadow and border radius is added to the wrapper element, this causes further strange behaviour (if overflow hidden removed from wrapper as well).

with box shadow and border radius

Upvotes: 10

Views: 23370

Answers (5)

Niteesh
Niteesh

Reputation: 3150

The error occur because you are setting content height as 100% , so it takes the height of it's parent wrapper, but wrapper also contains titile div which occupies some area of 100% height, so the scrollbar scrolls for the height : (wrapper- height of title). So, try this :

.content {
  overflow-y: auto;
  height: calc(100% - 30px);
}

Upvotes: 5

Pardip Lal
Pardip Lal

Reputation: 1

Because you add hidden in main container, Add scroll in main container.

.wrapper {
  border: 0;
  overflow: scroll; /* change it */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 0

Johannes
Johannes

Reputation: 67798

Well, height: 100%; on the .content plus the height of the .title element will be cut off in a parent that hides overflow and is 100% high - just because 100% plus anything else adds up to more than 100% => causing an overflow, which will be cut off due to overflow: hidden.

Upvotes: 0

mozkomor05
mozkomor05

Reputation: 1427

The overflow of .wrapper is hidden so it cuts off the content of children content. Simply remove the overflow:hidden and it will behave as you want.

Code snippet:

.wrapper {
  border: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  line-height: normal;
  height: 100%;
}
<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...
  </div>
</div>

If you for some reason can't delete overflow: hidden you can calculate the height of content using calc so it won't be cutted off.

Code snippet (using calc):

.wrapper {
  border: 0;
  position: fixed;
  overflow: hidden;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  color: white;
  padding: 5px 0;
  position: relative;
  margin: 0;
  background: #000;
}

.content {
  overflow-y: auto;
  line-height: normal;
  height: calc(100% - 26px);
}
<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...Some long content here...
  </div>
</div>

Upvotes: 0

Josh596
Josh596

Reputation: 77

  overflow-y: scroll;
  height: 100%;
}

Change overflow-y to scroll

Upvotes: 0

Related Questions