Developing a sophisticated responsive menu using Bootstrap 5 and Flex

I need a responsive menu that always maintains the appearance shown in the image below. Any overflowing content should trigger the addition of a scrollbar:

https://i.sstatic.net/Gen7g.png

Although my current solution works initially, it fails when additional content is introduced:


  <div class="row h-100">

    <div class="col d-flex flex-column h-100">
        <div class="row justify-content-center bg-primary">
          <div class="text-white">
            <div style="height:30px">Fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-secondary flex-grow-1">
          <div class="col-auto ms-auto bg-grey">
            <div class="row">
              <div class="col-12" style="width: 60px">
                Fixed width
              </div>
            </div>
          </div>
          <div class="col d-flex flex-column">
            <div class="row flex-grow-1">
              <div class="col-12 col-xl-6 bg-success">
                Responsive Col 1
              </div>
              <div class="col-12 col-xl-6 bg-danger">
                Responsive Col 2
              </div>
            </div>
          </div>
        </div>

      </div>
  </div>

When more content is added, the layout ends up looking like this:

https://i.sstatic.net/Dq0Gk.png

Is there a way to maintain the height as depicted in the first image and simply add overflow-y: auto? I've been unsuccessful in achieving this so far.

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

Define the height of your container and apply overflow to the children for a specific media query:

.flex-grow-1{
  height: calc(100vh - 30px);
}
@media only screen and (max-width: 1199px){
  .flex-grow-1 > .col-12 {
    height: 50%;
    overflow-y: auto;
  }
}

DEMO

.flex-grow-1{
  height: calc(100vh - 30px);
}
@media only screen and (max-width: 1199px){
  .flex-grow-1 > .col-12 {
    height: 50%;
    overflow-y: auto;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726c726e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row h-100">

  <div class="col d-flex flex-column h-100">
      <div class="row justify-content-center bg-primary">
        <div class="text-white">
          <div style="height:30px">Fixed height</div>
        </div>
      </div>
      <div class="row justify-content-center bg-secondary flex-grow-1">
        <div class="col-auto ms-auto bg-grey">
          <div class="row">
            <div class="col-12" style="width: 60px">
              Fixed width
            </div>
          </div>
        </div>
        <div class="col d-flex flex-column">
          <div class="row flex-grow-1">
            <div class="col-12 col-xl-6 bg-success">
              Responsive Col 1
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, est quis dapibus consequat [...]
            </div>
            <div class="col-12 col-xl-6 bg-danger">
              Responsive Col 2
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, est quis dapibus consequat [...]

            </div>
          </div>
        </div>
      </div>

    </div>
</div>

Answer №2

Achieving this is indeed possible. To do so, simply assign a specific height or max-height to the element and then apply overflow-y:auto; Here's an example:

 <div class="random_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 </div>

.random_content {
  background-color:red;
  width:400px;
  max-height:100px;
  overflow-y:auto;
}

Check out the JSfiddle demo here: https://jsfiddle.net/zL86q1th/

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

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content: html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: row; height: 100%; } .sidebar { ...

javascripthtmlcss

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

cssangular

What is the best way to trigger a new css animation on an element that is already in the midst of

Let's talk about an element that already has an animation set to trigger at a specific time: .element { width: 100%; height: 87.5%; background: #DDD; position: absolute; top: 12.5%; left: 0%; -webkit-animation: load 0.5s ease-out 5s bac ...

javascriptcsscss-animations

CSS: The sub-class functionality is not functioning as intended

Having trouble with this HTML element : <span class="item-menu-notif non-lue" onclick="dosomething(2150)"> TEXT </span> These are the CSS classes : .item-menu-notif{ display: block; cursor: pointer; padding: 0 0.4em 0 0.4em; } s ...

htmlcss

"Efficiently handle multiple instances of the same name using AJAX, JavaScript

I have a PHP-generated multiple form with HTML inputs containing IDs and NAMEs. I am struggling to capture all this information. When I click the "Done" button, everything is marked as completed due to the button names. <?$command = "SELECT * FROM exam ...

javascriptphpjqueryhtmlajax

Localhost is causing issues with Laravel in retrieving webfonts

I was trying to incorporate font-awesome into my Laravel project, but encountered a strange error. When I run the project, the following error appears in the console: GET http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?5 ...

phpcsslaravelnpm

"Utilizing custom data tags for woocommerce to display the product selling price with wc_rbp

When developing a website on WooCommerce, I encountered the need to create 6 different price lists with fixed prices for each product, while also being able to apply a global discount percentage for the price list assigned to each customer. To handle the ...

phphtmlwoocommercehook-woocommerce

Prevent the text within the textarea from wrapping onto the next line

My challenge involves a textarea where text overflows onto the next line when it exceeds the maximum characters. However, I want the text to continue on the same line with a scroll bar for better visibility. Here's an illustration: text here flows on ...

htmlcss

Strange behavior of focus()

My objective is to launch a popup containing an input field and automatically bring focus to that input. I have attempted using $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but unfortunately, ...

javascriptjqueryhtmlsetfocusautofocus

What could be causing the overflow of the div element within my header?

I recently embarked on a personal project to create my own portfolio website using HTML, CSS, and JavaScript. As I was working on styling the header section with bright colors for visualization purposes, I encountered an issue where the green box was overf ...

htmlcss

Obtaining Google AAID Using a Mobile Browser (JavaScript)

I've been looking for information online without much success regarding this topic. I am interested in retrieving a user's Google Advertising ID (AAID) through my website when they visit using a mobile browser. I assume it could be done with som ...

javascriptandroidhtmlmobilegoogle-advertising-id

Ways to make two blocks of text appear side by side and adapt to different screen sizes

Check out our website imageI'm facing a challenge in making these two text elements appear next to each other rather than stacking on top of each other. Additionally, I need them to adapt responsively to changes in screen size. When 'Icontext&ap ...

htmlcss

Having trouble implementing responsive image with fixed aspect ratio code

I've tried several tutorials online to make this image responsive with a fixed aspect ratio, but nothing seems to work. The image is set at 900x400px and I want it to remain fully visible on smaller screens as well. Here's the codepen link < ...

htmlcssimageresponsive-design

Can you explain the contrast between img.height and img.style.height?

I'm currently in the process of resizing a series of images by iterating through an array and adjusting their sizes. if(items[0].height > 700 || items[0].width > 700){ items[0].style.height = "700px"; items[0].style.width = "700px"; } As ...

javascripthtmldomhtml5-canvas

Sending a PHP variable to a JavaScript function

When attempting to pass a value to a JavaScript function by clicking a link, I encountered an error message: Uncaught SyntaxError: Unexpected identifier The following is the code snippet: <?php include_once("php_includes/check_login_status.php") ...

phpjavascripthtml

"Font Awesome appears to be malfunctioning on all versions of Internet Explorer and Microsoft Edge

Having trouble with Font Awesome icons and their compatibility with Internet Explorer. The icons display correctly on all other browsers, but on IE or Edge, there is a blank space where the icon should be. I noticed differences in styling when comparing ...

htmlcssiconsfont-facefont-awesome

Preventing users from clicking on links unless they double click by using CSS rotation

I'm struggling to figure out why only the white portion of my links is clickable. The links are designed as "3D" buttons using CSS rotate transitions, but I can't seem to fix the issue. Any assistance would be greatly appreciated! Check out the ...

htmlcss

Need at least one form input field out of three to be completed

Currently, I am developing a database program where users are required to enter some of their contact information. <form action="add_action.php" method="POST"> <div class="modal-body"> Name: <br> ...

htmlformsinput

Tips for implementing the same autocomplete feature across multiple form fields

Struggling to add multiple products and provide auto-suggest for each product name? You're not alone. It seems like the auto suggest feature is only working for the first product. Can anyone point out what's going wrong here? Here's my HTML ...

javascriptjqueryhtml

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

javascriptcss