Dealing with vertical overflow in a flex-grow container within Bootstrap 4

As a newcomer to HTML web layout (I must admit, I might be making rookie mistakes), I'm struggling with an issue that's been driving me crazy. Despite searching extensively, I haven't found a solution that fits my particular case.

I'm currently working on the layout for a desktop app I have in mind.

Here is the code snippet:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57273827273225793d2417667966617967">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

... // rest of the code here

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="d-flex flex-column h-100">
    <div class="content">
        first menu
    </div>

     ... // further content in similar structure      

    <div class="content bg-secondary">
        Footer
    </div>
</div>

The problem I'm facing is that the code is not respecting the 'overflow-auto' property in the 'content' section. Can someone help me understand why and how I can resolve this? Many thanks

javascripthtmlcssbootstrap-4

Answer №1

To ensure the body has a maximum height and to hide overflow, you can set it as follows:

body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

Next, apply overflow:auto to the content area to allow for scrolling when necessary...

<div class="d-flex flex-column h-100">
    <div class="content"> first menu </div>
    <div class="content"> second menu </div>
    <div class="content bg-danger flex-grow-1 overflow-auto">
        <div class="d-flex flex-row w-100 h-100">
            <div class="d-flex flex-column h-100 w-25">
                <div class="content bg-success"> first submenu </div>
                <div class="content overflow-auto"> Your unique text here... </div>
            </div>
            <div class="content bg-light w-75"> more content </div>
        </div>
    </div>
    <div class="content bg-secondary"> Footer </div>
</div>

Check out this custom demo link!

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 causes the consistent filling of responses in jQuery ajax?

After observing that the response of an ajax call using jQuery is never empty, I have come across the following code snippet: $.ajax({ type: "get", data: { data }, url: "phpFile", datatype: 'text' }).done(functio ...

javascriptphpjquerymysqlajax

What is the most efficient way to align a localStorage variable with its corresponding page?

In my current project, I have developed a component that is utilized in an online science lab setting. To ensure continuity for researchers who navigate away from the page and return later, I have integrated the use of localStorage. The goal is to preserv ...

javascriptreactjsreact-hookslocal-storagetinymce

How to monitor multiple items using the mouseleave event in jQuery

I am currently trying to achieve a specific effect by keeping the green border visible for the active menu item when hovering over the dropdown. The issue I am encountering is that the border disappears when moving the cursor over the dropdown, which is no ...

jquerycssanimation

Combining React, Express, and Nodemailer poses challenges in rendering components and sending emails simultaneously

Looking to utilize client-side routing for my React app and also incorporate Nodemailer for sending emails. However, since Nodemailer cannot be used on the client-side, I need to implement it on the Express server. Here is how the server code looks like: ...

javascriptnode.jsreactjsexpressnodemailer

Inquiring about CSS classes for numerous elements

table.rightlist td { text-align:right; } table.rightlist th { text-align:right; } This code snippet is intended to align both the table cells (td) and headers (th) to the right within a table with the "rightlist" class. However, upon testing the ...

css

Engaging with an HTML/JSON web service

I am looking for guidance on how to utilize a testing service for sending XML signed invoices that need to cross control through the Treasury Ministry. Can someone provide assistance? == TESTING ENVIRONMENT == API RECEPTION URL = https://api.comproba ...

htmljsonoauth-2.0

Dynamic HTML gallery that supports the addition of fresh images

Looking to showcase images from a local folder in a slideshow on a simple web page? The page should automatically update when new images are added or removed from the folder. I am not an expert and prefer a minimalist design with perhaps just a transitio ...

jqueryhtmlcssdynamicslideshow

Selenium Mouse/Pointer Display

Is there a way to visualize the selenium mouse movements during test execution? Can we display a windows cursor image or any kind of indicator like a dot or crosshair? I am currently working on implementing a drag and drop feature using Selenium and Java ...

javahtmltestingselenium

Troubleshooting: How to resolve the issue of "Error [ERR_HTTP_HEADERS_SENT]: Unable to set headers after they have been sent to the client"

* **> const PORT=8000 const express = require('express') const {v4:uuidv4}=require('uuid') const bcrypt =require('bcrypt') const jwt =require('jsonwebtoken') const cors=require('cors') const {MongoClie ...

javascriptnode.jsreactjsmernreact-fullstack

Avoid the default behavior when employing jQuery for Ajax requests

I am facing an issue with preventing the default action when submitting a form using ajax. It seems that my code is causing a page refresh and clearing the form without sending any data to the database. I tried including the php processing script link in t ...

phpjavascriptjqueryajax

Flask url_for usage done wrong

Running a flask server serves HTML pages with scripts stored in the static folder. An example script included in the header is: <script src="{{url_for('static', filename='js/viewer.js')}}"></script> The GET reques ...

javascripthtmlflasknicegui

Tips for adjusting text to fit within a container without needing to use overflow:auto

Is there a way to prevent text overflow in a container without using the overflow:auto property? I've come across plugins that automatically reduce the text size, but I'm not keen on that solution. What I want is for long words or URLs to wrap on ...

jqueryhtmlcss

Is there a way to incorporate a bottom border into Vuetify's v-tabs component?

I am trying to achieve a specific result: https://i.sstatic.net/1Um2th3L.png This is how I accomplished it: <v-tabs> <v-tab v-for="(tab, i) in tabs" :key="i" v-bind="tab" ></v-tab> </v-tab ...

cssvue.jsvuejs3vuetifyjs3

Implementing a class addition on focus event using Angular 2

Currently, I am in the process of upgrading an Angular 1 application to Angular 2 and encountering an issue with one of my existing directives. The task at hand is straightforward. When an input field is focused, a class should be added (md-input-focus) a ...

javascriptjqueryangularangular-directive

Guide on setting up JSME, a chemistry portal integrated with JavaScript, within vuejs

I am looking to integrate the JSME chemistry portal into my Vuejs application. Upon the initial page load, an error is displayed: JSME initialization error: HTML id jsme_container not found. Strangely, upon refreshing the page, the error disappears. How ...

javascriptjqueryvue.jsfrontend

What is the best way to implement a loop using JQuery?

<script> $(function() { $('.slideshow').each(function(index, element) { $(element).crossSlide({ sleep: 2, fade: 1 }, [ { src: 'picture' + (index + 1) + '.jpg' } ]); }); ...

javascriptjqueryhtmlcssloops

Showcasing a Facebook event to the online audience on a webpage

I am looking for a way to display specific information from a Facebook event on my webpage. This includes details such as time, location, creator, additional information, and even the thumbnail image. The event was not created by me, but I do have the URL ...

facebookeventshtmlpublish

Issue with Three.js Raycaster failing to intersect with a custom vertex shader

I'm currently working on implementing a particle system using a dedicated Vertex shader. I have provided a code example for reference: https://jsfiddle.net/dthevenin/7arntcog/ My approach involves utilizing a Raycaster for mouse picking to enable int ...

javascriptthree.js

Error in NodeJS (EJS): Unable to locate stylesheet file

Having trouble adding a CSS file to my Node.js project with the EJS Template Engine. The file cannot be found when trying to access it. GET http://localhost/css/bulma.css net::ERR_ABORTED 404 (Not Found) Project folder structure ./index.js ./views ...

cssnode.jsexpressnginxejs

Determine if an Image is Chosen upon Click with Javascript

I am currently working on a wysiwyg editor and I'm facing an issue where I need to determine if a user has clicked on an image within the selection range. Is there a method to detect this without attaching event handlers directly to the image itself? ...

javascript