Struggling to implement a vertical scroll bar within a nested div element

Struggling to make a scroll bar appear in the box-content div, even after adding 'overflow-y:auto'.

My specific requirements are:

  • The entire layout should adjust according to the browser height. This is why I've set #wrap { ... height: 50vh; ...}
  • The scroll bar shouldn't include the header, but only apply to the box-content div. The header's height should adapt to its contents and wrap them if needed.

Below is the CSS code:

#wrap {
    margin: 10px;
    height: 50vh;
    border: 2px solid black;
}

.container {
    border: 4px solid red;
    padding: 4px 3px;
    margin: 0;
    max-height: 90%; // As a percentage of the parent.
    /* height: 300px;       /* This causes the scroll bar to appear, but its not what I want. */
}   

.box-header {
    background-color: green;
    padding: 5px 10px;
    color: white;
}

.box-content {
    border: 3px solid blue;
    overflow:auto;
    padding: 5px;
    padding-top: 10px;
    max-height:100%;
}

And here's the HTML:

<div id="wrap">
<div class="container">
<div class="box-header"> Header String</div>
<div class="box-content">
 <p>line 1</p>
 <p>line 2</p>
 <p>line 3</p>
 <p>line 4</p>
 <p>line 5</p>
 <p>line 6</p>
 <p>line 7</p>
 <p>line 8</p>
 <p>line 9</p>
 <p>line 10</p>
 <p>line 11</p>
 <p>line 12</p>
 <p>line 13</p>
 <p>line 14</p>
 <p>line 15</p>          
 <p>line 16</p>
 <p>line 17</p>
 <p>line 18</p>
 <p>line 19</p>          
</div>
</div>
</div>

Link to the fiddle for reference: https://jsfiddle.net/mjvancouver905/5vswprfw/

Thanks for your help.

Answer №1

To create a responsive layout, you can utilize the flex property.

#wrap {
  margin: 10px;
  border: 2px solid black;
}

.container {
  padding: 4px 3px;
  margin: 0;
  height: 50vh;
  /* Adjust to screen size */
  display: flex;
  flex-direction: column;
}

.box-header {
  background-color: green;
  padding: 5px 10px;
  color: white;
}

.box-content {
  border: 3px solid blue;
  padding: 5px;
  padding-top: 10px;
  overflow-y: scroll;
}
<div id="wrap">
  <div class="container" style="border: 4px solid red">
    <div class="box-header"> Header in the B1 div.</div>
    <div class="box-content">
      <p>line 1</p>
      <p>line 2</p>
      <p>line 3</p>
      <p>line 4</p>
      <p>line 5</p>
      <p>line 6</p>
      <p>line 7</p>
      <p>line 8</p>
      <p>line 9</p>
      <p>line 10</p>
      <p>line 11</p>
      <p>line 12</p>
      <p>line 13</p>
      <p>line 14</p>
      <p>line 15</p>
      <p>line 16</p>
      <p>line 17</p>
      <p>line 18</p>
      <p>line 19</p>
    </div>
  </div>
</div>

Answer №2

It's essential to include a fixed maximum-height property in your CSS code, for example:

.content-box {
  border: 2px solid red;
  overflow: scroll;
  padding: 10px;
  max-height: 300px;
}

https://jsfiddle.net/zipl39uk/

Answer №3

To achieve this effect, I suggest setting a fixed width for the container to hide any overflow. Instead of using max-height: 90%, change it to height: 90%. Also, be sure to include the overflow-hidden property to ensure that any overflowing content is hidden within the container.

Check out this working example here: https://jsfiddle.net/9h8tqs7m/8/

Below are the updated CSS styles:

.container {
  padding: 4px 3px;
  margin: 0;
  height: 90%;
  overflow:hidden;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

populate a bootstrap column with numerous span elements containing varying numbers on different rows

Wondering if it's possible to have a div with the bootstrap class "column" filled with multiple span elements that may break into more than one line. The challenge lies in making sure that each line of spans stretches and fills the line, even if there ...

What is the best way to adjust the z-index when hovering over an li element

In my <ul>, each <li> contains an image. I want these images to scale and become opaque upon hover. However, the issue is that when they scale, they get covered by the following image. Unsure if the z-index is correctly placed... Below is the C ...

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

What is the best way to transition an absolute positioned element from right to center?

When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance. HTML <div class="row m ...

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

What is the best method to choose a random color for the background when a button is pressed?

Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someo ...

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

Guide to creating a dynamic column layout with minimum height divs

I am facing an issue with the variable height of my div, causing it to position incorrectly. To demonstrate the problem, I have included a code snippet below. Here is the solution I am seeking: https://i.sstatic.net/XMAMr.png Note: Since the div has a ...

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

Button that floats and leads to the previously visited page

Looking to incorporate a button that moves with the user's scroll or remains fixed at the bottom of the window. I have detailed instructions on certain pages (e.g. /georgia-insurance-license) that contain links to other related posts (e.g. How to Pas ...

Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

I'm working with the KnpMenuBundle and I need to customize a link that has the route 'uri'=>'#'. How can I achieve this? The desired link should be styled like this: <a href="#" class="js-sub-menu-toggle"> &l ...

Tips on completing landing page animations and displaying the main page of a website by utilizing React JavaScript

https://i.stack.imgur.com/M4VgY.pngIs there a way to stop the landing page animation after 2-3 seconds and show the main page instead? Can I achieve this by using setTimeOut function in JavaScript? [ export default Loader; ...

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

Guide on making jQuery color variables?

Is there a way to achieve CSS variable-like functionality with jQuery? For example, creating reusable CSS attributes in jQuery instead of using SASS variables. Imagine if I could define a variable for the color black like this: I want to make a variable t ...

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

Is there a way to create a fixed line text area that limits the user from typing beyond a certain number of lines and maximum width? My current CSS styling for this is as follows: .area-style { resize: none; width: 324px; height: 200px; m ...

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

The issue of drop shadows causing links to not work properly in Internet Explorer

I am currently working on a website design that features a fixed menu positioned behind the body. When the menu icon is clicked, some jQuery code shifts the body to the left. To create the effect of the fixed menu being positioned underneath, I have added ...

Bootstrap Containers Misaligned

I have been developing a website with two containers, one on the left and one on the right. By executing the following HTML code, you can see the structure: <!DOCTYPE html> <html lang="en"> <head> <link rel=& ...

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...