Content is being clipped due to an overflow that hides the scroll bar

Question

Content is being clipped due to an overflow that hides the scroll bar

I've encountered an issue with the code below. It seems that when the title element is included, the content gets clipped at the bottom of the scroll. However, if I remove the title element, there is no cutoff of content. The positioning of the title element seems to disrupt the layout of the next element.

View screenshot here

HTML

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Some lengthy content goes 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%;
}

Adding a box shadow and border radius to the wrapper element leads to some unexpected behavior (especially if overflow hidden is removed from the wrapper).

Another screenshot available here

html css

Answer 1

Answer №1

The issue arises due to setting the content height as 100%, causing it to take the height of its parent wrapper. However, the wrapper also includes a title div that occupies some of the 100% height, resulting in the scrollbar scrolling for the height: (wrapper - height of title). To resolve this problem, you can try the following CSS:

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

Answer 2

The issue arises due to setting the content height as 100%, causing it to take the height of its parent wrapper. However, the wrapper also includes a title div that occupies some of the 100% height, resulting in the scrollbar scrolling for the height: (wrapper - height of title). To resolve this problem, you can try the following CSS:

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

Answer 3

Answer №2

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

Make the scroll overflow-y to auto

Answer 4

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

Make the scroll overflow-y to auto

Answer 5

Answer №3

When the overflow of .wrapper is hidden, it causes the content of the children to be cut off. To correct this, simply remove the overflow:hidden and the behavior will be as desired.

Here is the 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...
  </div>
</div>

If you are unable to delete overflow: hidden for some reason, you can calculate the height of the content using calc to prevent it from being cut 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...
  </div>
</div>

Answer 6

When the overflow of .wrapper is hidden, it causes the content of the children to be cut off. To correct this, simply remove the overflow:hidden and the behavior will be as desired.

Here is the 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...
  </div>
</div>

If you are unable to delete overflow: hidden for some reason, you can calculate the height of the content using calc to prevent it from being cut 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...
  </div>
</div>

Answer 7

Answer №4

When you use height: 100%; on the .content element, along with the height of the .title element, it may result in overflow being cut off in a parent container that hides overflow and has a height of 100%. This happens because when you add 100% to another value, it exceeds 100% and causes an overflow, which is then hidden due to the use of overflow: hidden.

Answer 8

When you use height: 100%; on the .content element, along with the height of the .title element, it may result in overflow being cut off in a parent container that hides overflow and has a height of 100%. This happens because when you add 100% to another value, it exceeds 100% and causes an overflow, which is then hidden due to the use of overflow: hidden.

Answer 9

Answer №5

By placing the hidden element inside the main container, you must also include a scroll feature in the main container.

.container {
  border: 0;
  overflow: scroll; /* ensure to update this */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

Answer 10

By placing the hidden element inside the main container, you must also include a scroll feature in the main container.

.container {
  border: 0;
  overflow: scroll; /* ensure to update this */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

Content is being clipped due to an overflow that hides the scroll bar

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the reason behind loading two srcset images?

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

What is causing my page to automatically refresh whenever I click on buttons?

Navigating through each segment

Align text vertically next to an image

How can I create a unique CSS or JS transition for a button that dynamically changes size based on text

Locate a specific element by utilizing xpath

Customize your search experience with Google Custom Search Engine for Internet Explorer

What adjustments can I make to my smooth-scrolling JavaScript code in order to exclude my Bootstrap Carousel from the scrolling

Tips for directing attention to a specific row with an input field in JavaScript

Import files from local directory to iframe in Electron application

The Angular Material md-input-container consumes a significant amount of space

Begin anew with Flip.js

Unexpected Issues with the Ant Design Sidebar Layout Demo

A Guide to Making a Floating Widget That Can Move Beyond the Boundaries of a Website in React

Click on a hyperlink to open a fresh page in a separate tab using Google Chrome

The battle between DataBind and control property settings

Overlay a div on top of an image in an HTML email

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

What is the significance of vendor prefixes in the world of CSS3?