Ways to Implement a Scrollbar in a Status Container When Content Extends Beyond 100% Height Without Specifying a Fixed Height

I am currently working on a project that requires a responsive layout, and I need the .status container to display a scrollbar if the content exceeds the available space. The challenge is that I cannot set a fixed height for the .status container as it must remain flexible and responsive. I'm hoping to find a solution using primarily HTML and CSS, but I am also open to incorporating JavaScript, TypeScript, or Angular if necessary.

In this particular case, each .status container should show a scrollbar when the content overflows beyond the available height. However, I am unsure of how to achieve this without specifying a fixed height.

Is there a way to ensure that the .status container handles overflow correctly in this scenario?

Below is the code snippet I am working with:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: red;
            color: #fff;
            text-align: center;
        }

        .container {
            padding: 20px;
            width: 100%;
            height: 100%;
            display: grid;
            grid-auto-rows: auto 1fr;
            row-gap: 20px;
        }

        .content-1 {
            width: 100%;
            height: 60px;
            background-color: yellow;
        }

        .content-2 {
            width: 100%;
            height: 100%;
            background-color: pink;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 20px;
        }

        .status {
            height: 100%;
            max-height: 100%;
            background-color: blue;
            padding: 5px;
            overflow-y: auto;
        }

        .card {
            width: 100%;
            height: 200px;
            background-color: green;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-1"></div>
        <div class="content-2">
            <div class="status">
                <div>Status</div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="status">
                <div>Status</div>
            </div>
            <div class="status">
                <div>Status</div>
            </div>
            <div class="status">
                <div>Status</div>
            </div>
        </div>
    </div>
</body>
</html>

javascripthtmlcssangulartypescript

Answer №1

If you wish to avoid having individual scroll bars for each .status container, you can adjust the CSS settings in the following way:

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  color: #000;
  text-align: center;
}

.container {
  padding: 20px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-rows: auto 1fr;
  row-gap: 20px;
}

.content-1 {
  width: 100%;
  height: 60px;
  background-color: green;
}

.content-2 {
  width: 100%;
  height: 100%;
  background-color: orange;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  overflow-y: scroll;
}

.status {
  background-color: red;
  padding: 10px;
}

.card {
  width: 100%;
  height: 200px;
  background-color: yellow;
  margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <div class="container">
    <div class="content-1"></div>
    <div class="content-2">
      <div class="status">
        <div>Status</div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>
      <div class="status">
        <div>Status</div>
      </div>
      <div class="status">
        <div>Status</div>
      </div>
      <div class="status">
        <div>Status</div>
      </div>
    </div>
  </div>
</body>

</html>

This solution will ensure that only the .content-2 container will have a scrollbar when needed, without affecting the individual .status containers.

However, if you do require separate scroll bars for each .status container, you can make these modifications instead:

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  color: #000;
  text-align: center;
}

.container {
  padding: 20px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-rows: auto 1fr;
  row-gap: 20px;
}

.content-1 {
  width: 100%;
  height: 60px;
  background-color: green;
}

.content-2 {
  width: 100%;
  height: 100%;
  background-color: orange;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  overflow-y: scroll;
}

.status {
  background-color: red;
  padding: 10px;
  overflow-y: auto;
}

.card {
  width: 100%;
  height: 200px;
  background-color: yellow;
  margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <div class="container">
    <div class="content-1"></div>
    <div class="content-2">
      <div class="status">
        <div>Status</div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>
      <div class="status">
        <div>Status</div>
      </div>
      <div class="status">
        <div>Status</div>
      </div>
      <div class="status">
        <div>Status</div>
      </div>
    </div>
  </div>
</body>

</html>

Please note that adding overflow-y: scroll; to the .content-2 container may result in an unnecessary scrollbar at the bottom due to the property's application.

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

Highlighting a row upon being clicked

How can I implement a feature in my HTML page that highlights a row when selected by changing the row color to #DFDFDF? If another row is selected, I would like the previously selected row to return to its original color and the newly selected row to be h ...

javascripthtmlcssdom

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...

csscss-transitions

A guide on dynamically using jQuery to embed an image within a hyperlink tag

I am having trouble with these HTML tags: img = <img data-dz-thumbnail="" target="_blank" alt="twitter-btn-mob.png" src="image.jpg"> a = <a href="javascript:void(0)" target="_blank"></a> My goal is to insert the image tag into the anc ...

javascriptjquery

What could be causing my paragraph to shift when an animated expanding header is applied in CSS?

For a school assignment, I am facing an issue where the paragraph is being affected by my CSS animation on the main header title that expands and contracts. My goal is to keep the paragraph in a fixed position without being moved by the header animation (V ...

htmlcss

the sequence of events in a web setting

Can you explain the sequence of execution in a web application? The order typically involves PHP, HTML, JavaScript, CSS, and MySQL being executed. ...

phpjavascripthtmlmysqlcss

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

javascriptjqueryhtmlcss

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Is there a way for me to automatically update my URL with different API IDs as I iterate through a JSON array?

While iterating through my JSON file, I use a forEach loop to extract all the IDs like this: var gameId = request("https://api.sportradar.us/ncaamb-t3/games/" + yyyy + "/" + mm + "/" + dd + "/schedule.json?api_key=************", function(error, response, ...

javascriptarraysjsonnode.jsapi

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

phpjavascriptjqueryhtmlajax

Is there a way to modify the overflow/wrap direction on small screens for just one Bootstrap column?

With a bootstrap row containing two columns on large screens (referred to as Text 2 and Image 2 below), the layout wraps on small screens, making Text 2 appear above and Image 2 below, which is the default behavior. However, if I wish to have Image 2 displ ...

csstwitter-bootstrapbootstrap-4drupal-8

Activate the search feature in select2 to allow multiple selections

I'm looking for a way to incorporate a search box into my multi-select fields using select2. Oddly enough, while the search boxes show up as expected in single-select fields, applying the same select2() function to a multi-select field doesn't s ...

javascriptjqueryjquery-select2

Using Three.js to Spin Cylinder Towards a Vector3 Destination

I've attempted a thorough search, but unfortunately, I haven't come across any solutions that address my issue: I have a vector and a CylinderGeometry Mesh. My goal is to make the cylinder face the direction indicated by the vector. The input pa ...

javascriptthree.js

Is it guaranteed that my callbacks will be executed sequentially and in order when iterating with a for loop in Node.js?

Sorry for the vague title, but I often encounter this issue and wonder about the best approach to handle it: I have an array or list that I want to iterate through and call methods with callbacks. Will all the callbacks be executed? And will they be done ...

javascriptnode.js

What could be causing the inner array typescript to be inaccessible in an Angular 5 application?

Below are the JSON definitions that I am working with: export class Company { name: string; trips : Trip[] = []; } export class Trip{ id: number; name: string; } Within the component, there is a method that contains the ...

arraysjsonangulartypescriptjax-rs

The name 'global' cannot be located

Issue with Angular 15 Project and Jest Testing Framework In my Angular 15 project, I am using jest (v28.1.3) for unit testing. I encountered an error when trying to test a method that includes the use of setTimeout(). As per the information provided in t ...

angularjestjs

What is the process for importing a node module in React-Kotlin?

After creating my app using the create-react-kotlin-app command, it loaded successfully in Chrome. I then installed the React Material UI package via NPM without any issues. However, I am now facing the challenge of incorporating the Material UI module int ...

javascriptreactjskotlincreate-react-kotlin-app

Use the UP key in jQuery to move the cursor upwards within a textarea

When navigating through an HTML form, arrow keys are commonly used to move focus between fields. The following code allows smooth transition for all input elements, but when it comes to textarea where multiple lines can be present, moving the cursor up or ...

javascriptjqueryhtml

Retrieve the list of all members in the Telegram group

Is there a way to retrieve all users from a Telegram group using the Telegram bot API in Node.js? While I'm familiar with the getChatAdministrators method, it seems like there isn't a specific method for getting all group members. I would apprec ...

javascriptnode.jsbotstelegram

I am unable to access the state after setting it in useEffect in React. Why is this happening?

After rendering the component, I utilize socket io to send a socket emit in order to fetch data within the useEffect hook. Subsequently, I also listen for the data that is returned. However, upon receiving the data back from the socket, I update the stat ...

javascriptreactjsreact-hooks

Center an absolutely positioned div using CSS

What is the best way to position an absolute div at the center? <div class="photoFrame">minimum width of 600px, positioned absolutely</div> jQuery var screenWidth = $(window).width(); $('.photoFrame').css({'margin-left': ...

jquerycsscenterabsolute