Managing overflow in CSS divs

Question

Managing overflow in CSS divs

Two divs are needed in this layout, where the first div adjusts its height based on the content and the second div takes up the remaining space. The second div should be scrollable to display all items. Here is the design template: https://i.sstatic.net/MI07Y.png

For a demonstration, refer to my example on JSFiddle. Please note that only CSS is used, no JavaScript.

<div class="tbl">
  <div class="header">
    <p>1</p>
    <p>2</p>
  </div>
  <div class="body">
    <div class="in-body">
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>
  </div>
</div>

html css overflow

Answer 1

Answer №1

Check out the new design! I've adjusted the second div to take up at least 35% of the window height. If you want to change the minimum height of the second div, just modify the 65vh on the wrapper. (Remember that 100vh represents the viewport height, and the remaining space is allocated to the second div).

body {
  margin: 0;
}
.wrapper {
  width: 35%;
  max-height: 65vh;
  position: relative;
}
.first,
.second {
  width: 100%;
  color: white;
  padding: 15px;
  box-sizing: border-box;
}
.first {
  background-color: green;
}
.second {
  background-color: blue;
  position: absolute;
  height: calc(100vh - 100%);
  top: 100%;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="first>
    kitsch flannel direct trade listicle ramps truffaut.
  </div>
  <div class="second">
    Brunch fingerstache bespoke squid neutra. Cred hella meh, slow-carb kale chips fashion axe vinyl keytar banjo butcher ethical affogato taxidermy. Bicycle rights venmo lomo truffaut. Art party kickstarter vice, truffaut yr 90's farm-to-table. Banh mi try-hard
    distillery, next level mumblecore jean shorts sustainable drinking vinegar squid banjo 3 wolf moon. Slow-carb waistcoat fashion axe, try-hard kinfolk flexitarian hella pitchfork semiotics truffaut blue bottle stumptown. Asymmetrical skateboard distillery
    chambray.
  </div>
</div>

Answer 2

Check out the new design! I've adjusted the second div to take up at least 35% of the window height. If you want to change the minimum height of the second div, just modify the 65vh on the wrapper. (Remember that 100vh represents the viewport height, and the remaining space is allocated to the second div).

body {
  margin: 0;
}
.wrapper {
  width: 35%;
  max-height: 65vh;
  position: relative;
}
.first,
.second {
  width: 100%;
  color: white;
  padding: 15px;
  box-sizing: border-box;
}
.first {
  background-color: green;
}
.second {
  background-color: blue;
  position: absolute;
  height: calc(100vh - 100%);
  top: 100%;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="first>
    kitsch flannel direct trade listicle ramps truffaut.
  </div>
  <div class="second">
    Brunch fingerstache bespoke squid neutra. Cred hella meh, slow-carb kale chips fashion axe vinyl keytar banjo butcher ethical affogato taxidermy. Bicycle rights venmo lomo truffaut. Art party kickstarter vice, truffaut yr 90's farm-to-table. Banh mi try-hard
    distillery, next level mumblecore jean shorts sustainable drinking vinegar squid banjo 3 wolf moon. Slow-carb waistcoat fashion axe, try-hard kinfolk flexitarian hella pitchfork semiotics truffaut blue bottle stumptown. Asymmetrical skateboard distillery
    chambray.
  </div>
</div>

Managing overflow in CSS divs

Answer №1

Similar questions

Change the value of a div element from a decimal number to an integer

Extracting information from a webpage is becoming time-consuming when utilizing Selenium and BeautifulSoup

Customizing CSS Styles Based on Browser Specifications

I am experiencing difficulty with my background image loading as it requires a specific pixel value for height

Continuously spinning loading icon appears when submission button is triggered

CSS not being applied to certain HTML elements due to an error in implementation

Limiting the types of files a user can access through a web browser

html/css: managing content overflow in web pages

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

Tips for adjusting jCountdown timer to be auto responsive while utilizing CSS sprite resources

Utilize Bootstrap 3 Datepicker version 4 to easily set the date using Moment.js or Date objects

Aligning rotated text in a bootstrap 4 table header

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Error: Trying to access the parent node of an undefined property

One PHP File Solution for Customizing Tab Colors

Guidelines for managing a catch function

Unable to retrieve information from the table using watir-webdriver

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

What steps can I take to ensure that the full tingle modal, which includes an image, is visible when the

Creating a scrolling sidebar in Bootstrap 4