Tips for scrolling content within a flex row that has a flex-grow-1 property

I am working on a Bootstrap layout where there are 3 rows wrapped in a flex column. Here is how it looks:

<div class="row" style="height:100vh;">
  <div class="col d-flex flex-column">
    <div class="row">...</div>
      <div class="row flex-grow-1">
        <table>
          ...many rows...
        </table>
      </div>
    <div class="row">...</div>
  </div>
</div>

The first row at the top of the flex column, the second row takes up all the space in between, and the third row is at the bottom. I want to place a table with many rows in the second row, contained within a "window" that allows scrolling to see the content of the table.

However, the second row expands with the table content. I have tried wrapping the table in a div and setting max-height to 100%, but the flex row still grows due to the table content.

How can I achieve a scrolling effect inside the flex row while taking up the maximum available space of its parent with a fixed height?

cssbootstrap-4flexbox

Answer №1

Here is an example of how to use max-height and overflow-auto to make it work...

   <div class="row">
        <div class="col d-flex flex-column vh-100" style="max-height: 100vh">
            <div class="row">
                top row
            </div>
            <div class="row flex-grow-1 overflow-auto">
                <div class="col">
                    <table>
                        <tbody>
                            <tr>
                                <td>table row</td>
                            </tr>
                            ..
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">bottom row</div>
        </div>
   </div>

For more information, check out this post: Bootstrap 4: Scrollable row, which fills remaining height

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

What is the best method to dynamically assign a class to a TD element in a data table when adding

I am looking to apply a class to the td element when receiving data from an ajax call Here is the default HTML code snippet <tr> <td>@fisrt.System_Code.Code</td> <td>@fisrt.System_Code. ...

javascriptjqueryhtmldatatablesbootstrap-4

What is the process for triggering data-dismiss after the href has been activated?

Could someone help me with this issue? <a class='btn btn-danger' href='page.html'>Delete</a> I am trying to activate the "data-dismiss" attribute after the "href" is activated. My initial attempt was using this code: < ...

javascripthtmljquerybootstrap-4

Displaying leap years and non-leap years in distinct tables

I attempted to organize the display of leap years and non-leap years from 1991 to 2100 into two separate tables, but unfortunately, I was unsuccessful. Could you kindly offer guidance on how to present this information in a table format or a grid system? ...

phphtmlcssbootstrap-modalleap-year

"Implementing a Modular CSS Approach and Uniform Styling Across Your App

How can we handle the scenario of implementing specific styling for h1 tags within a modular CSS approach? In the past, this would have been achieved through inheritance in a single stylesheet. For example: .h1 { font-size: 3rem; /* more styles */ } .h2 { ...

cssreactjscss-modulesreact-css-modules

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

Utilize CSS block display for ::before and ::after pseudo elements within a div container

I have a CSS file that contains the following code snippet: .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-fam ...

htmlcssdisplay

What steps should I take to ensure the height of this navigation bar is correct?

I'm attempting to ensure that this div displays the correct height (without manually specifying a fixed number like 75px). Here's how I want it to appear: ------------------------------------------ | something | something else | --- ...

htmlcssresponsive

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

htmlcsssvghigh-contrast

CSS Styled Product Index

Currently, I am working on creating a product catalog using React and CSS. Everything is going smoothly except for the last row of products. The issue with the last row is that it only contains 1 element, and due to the flex-grow: 1 setting, it ends up ta ...

htmlcssreactjs

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time: During the initial fade in, the opacity value does not seem to be respected, as the text seems to a ...

csscss-animationscss-transitions

excess margin running along the left side of each page

When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? https://i.sstatic.net/MsX1a.png ...

jqueryhtmlcssuser-interface

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Add a focus style to the submit button input

Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused. Please review my code snippet and screenshot below. What could be causing this problem? CSS .search-form .search-f ...

htmlcssformsfocus

Organized grid design where every element occupies its own required space

Here's the current image I have displayed: https://i.sstatic.net/qKH8x.jpg This image is being styled by the following code: .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); } I've been searching for a solution ...

htmlcssflexboxcss-grid

What methods can I use to minimize the gap between images within the <figure> element?

    Is there a way to adjust the spacing between images when using <figure>? I've been trying to reduce the space, but I can't seem to make it work. I want to display 3 images side by side in one row, but because I'm struggling to ...

htmlcss

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Guide to setting up a nested vuetify navigation drawer

I am facing a scenario where I have one fixed navigation drawer with icons and another dynamic navigation drawer that should open and close adjacent to the fixed one without overlapping. The current implementation is causing the dynamic drawer to overlap t ...

javascriptcssvue.jsvuetify.js

an li element is accompanied by a visible box

In my possession is a container: #box1 { height:100px; width:208px; } along with a series <li id="first"><strong>FIRST</strong> </li> <li id="second"><strong>SECOND</strong&g ...

jquerycss

A guide on retrieving all the table data and displaying it in the user interface using templates in Django

I am working on a Django project where I have created a model named "Files" with fields such as Id (auto-generated) and file_name. My goal is to retrieve all file names from the database and display them as a list on the user interface. To achieve this, I ...

pythonhtmlcssdjangotemplates