Flex - offspring locked in place and filling the full height

I need a menu that stays fixed at a height of 100, stretching to accommodate its content. If the content exceeds the height of the menu, a scrollbar should appear within the menu without allowing it to grow beyond 100.

The page's content, on the other hand, can grow to any height, with a minimum height that stretches to match its parent's height. If the content grows beyond the space available, the default scrollbar should appear on the right side of the page.

Here is the HTML structure:

<div class="module">
      <nav class="vertical-menu">
        <header>
          <h5>Menu</h5>
        </header>
        <div class="menu-links">
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/> 
        </div>
      </nav>
      <div class="page-content">
        Some content<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
      </div>
    </div>

And the corresponding CSS styles:

    .module {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: lightgray;
    }

    .vertical-menu {
      margin: 10px 0;
      width: 300px;
      background-color: coral;
      flex-shrink: 0;
      align-items: stretch;
    }

    .vertical-menu h5 {
      font-size: 23px;
      padding: 10px 22px;
      border-bottom: 2px solid black;
    }

    .page-content {
      margin: 10px;
      background: tomato;
      flex-grow: 1;
    }

Find the codepen example here.

I appreciate any assistance with resolving this issue.

Answer №1

Here is the solution you requested!

https://codepen.io/anon/pen/VBEpOR#anon-login

If you desire for the sidebar to remain visible while scrolling through the page, follow these steps:

Enclose the content of .vertical-menu within a helper container named .vertical-menu-body and:

  • Set its position to fixed;

  • Give it the same width as .vertical-menu

  • Allow scrolling with overflow-y: scroll;

  • Limit its height with max-height: 100vh.

Here is the complete code:

CSS:

.module {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: lightgray;
}

.vertical-menu {
  margin: 10px 0;
  width: 300px;
  flex-shrink: 0;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.vertical-menu-body {
  position: fixed;
  max-height: 100vh;
  width: 300px;
  background-color: coral;
  overflow-y: scroll;
}

HTML:

<div class="module">
  <nav class="vertical-menu">
    <div class="vertical-menu-body">
      <header>
        <h5>Menu</h5>
      </header>
      <div class="menu-links">
        menu link<br/>
        ...
      </div>
    </div>
  </nav>
  <div class="page-content">
    Some content<br/>
    ...
  </div>
</div>

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

The functionality of the disabler button is not fully operational on tablet devices

-I have a button: -I would like to use JavaScript to disable it: document.getElementById("input-datestart").disabled = true; -CSS: input:disabled { background-color: #fff!important; color: #000; } Text color [color: #000;] While it works on ...

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

Ways to eliminate the navigation button on an HTML5 video player

I'm having a great experience using the HTML5 video player to continuously play videos. However, I have noticed that when my mouse cursor hovers over the video, a navigation button appears at the end of the screen. I would like to either remove or hid ...

The chosen filter will be displayed in the list of active filters

My website displays various products, and like many other similar sites, I am attempting to implement filters for the search results. One of the filters I have is for colors. I am showcasing color thumbnails, and when a user selects a color thumbnail, the ...

Creating a dynamic form field using JavaScript

I'm struggling with a JavaScript issue that requires some assistance. I have a form sending an exact number of inputs to be filled to a PHP file, and now I want to create a preview using jQuery or JavaScript. The challenge lies in dynamically capturin ...

Tips for showing an Object with nested Objects in Vue.js

Looking for guidance on displaying a JSON object in Vue.js with the following structure: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ & ...

Is there a unique shape element, such as a true circle, available in HTML5?

There doesn't seem to be any documentation on this, suggesting they may not exist. However, it's always worth investigating. I am in search of a perfectly circular (or any polygon shape other than a rectangle) element. I can create a circle in c ...

Give the inner container the ability to expand to fill the remaining space

After formatting my HTML code as shown below: https://i.sstatic.net/oaVVg.png The blue rectangle takes up 70% of the outer container's width, while the green rectangle occupies the remaining 30%. My goal is to have the blue rectangle expand to fill ...

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

I attempted to place a textarea within a dialog box, with the intention of retrieving the value of that textarea when the "ok" button is clicked. However, I am encountering difficulties in retrieving the value. What could possibly be causing this issue? ...

Image swaps with timer for button

I am working on a project where I have a page with 5 image buttons arranged horizontally. The objective is to have the images on each button change sequentially every 3 seconds in a continuous loop. Here is my code: $(document).ready(function (){ Beg ...

Tips on using htmlspecialchars in combination with a href:To safely include links in

If I have the following code: $text = "please visit this <a href='http://example.com'>site</a>." $text = htmlspecialchars($text); echo $text; The output will be please visit this <a href='http://example.com'>site< ...

What could be the reason for my Form styling failure?

Currently working on freecodecamp's portfolio creation exercise. It should be a straightforward task, but I'm facing a small issue that's puzzling me. I'm trying to remove the border and outline (when focused) from my contact-area form ...

Moving your cursor over the text will eliminate the border of the <img> located directly above it

Check out the latest products here! <ul class="products"> <li class="product first"> <a href="http://www.gwendolynbarnes.com/product/finis/"> <img width="117" height="150" src="http://www.gwendolynbarnes.co ...

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

Unable to get jQuery accordion to function as expected when using content retrieved through AJAX requests

Seeking assistance with a malfunctioning accordion that is not working after receiving content from another page through AJAX. The problematic page in question can be found at: Upon loading the page, it sends a default city name to processtempo.php which ...

I created some jQuery code that modifies a button when it is hovered over, however, I ended up writing the code individually for each button. What steps can I take to turn it

Is there a way to turn the code for each button on my website into a jQuery function that can be applied to any button? This is how the code currently appears: $(document).ready(function() { $("#linkXML").hover( function() { ...

Transforming the appearance of a clickable link when tapped

Is there a simple way in Bootstrap 5 to change the style of a clicked link to an "active" style while reverting the previously clicked link back to normal? Or is this something that would require custom CSS/JS? <ul class="nav nav-pills flex-column& ...

How to create a CSS-only dropdown menu for IE 6 without relying on JavaScript?

While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...

Utilizing JavaScript to retrieve data from a self-submitting form

From my database, I am able to create a list of options for users to choose from. Once a selection is made, the values are submitted back to the same page and retrieved using Javascript. Within the same form, there are radio buttons and a multiple selecti ...