Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out.

Check out this JSFiddle for reference

  $('.ui.dropdown')
    .dropdown();
.ui.vertical.menu {
  display: flex;
  flex-direction: column;
}

.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui vertical menu">
    <div class="item">
      <h3 class="ui header">Choose foos</h3>
      <div class="ui icon search input">
        <i class="search icon"></i>
        <input type="text" placeholder="Search foo..." />
      </div>
    </div>

    <div class="item">
      Selected foos
      <div class="scrolling menu">
        <div class="item">
          <div class="content">foo name</div>
        </div>
      </div>
    </div>

    <div class="overflowing item">
      foos
      <div class="scrolling menu">
        <div class="item">
          <div class="content">Foo</div>
        </div>
         <!-- Repeat items as needed-->
      </div>
    </div>
  </div>

htmlcssflexboxoverflow

Answer №1

To ensure that the overflow property functions properly, it is essential to have a specified height at some point within the structure. Without this defined height, the property would not know where to overflow and would continue extending indefinitely.

Here is a suggested solution:

.ul.vertical.menu { height: 100vh; }

.overflowing.item { flex-basis: 1px; flex-grow: 1; }


.ui.vertical.menu {
  display: flex;
  flex-direction: column;
  height: 100vh;  
}

.ui.vertical.menu>.overflowing.item {
  flex-basis: 1px;
  flex-grow: 1; 
}

.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
<div class="ui vertical menu">
  <div class="item">
    <h3 class="ui header">Select foos</h3>
    <div class="ui icon search input">
      <i class="search icon"></i>
      <input type="text" placeholder="Search foo..." />
    </div>
  </div>

  <div class="item">
    Selected foos
    <div class="scrolling menu">
      <div class="item">
        <div class="content">foo name</div>
      </div>
    </div>
  </div>

  <div class="overflowing item">
    foos
    <div class="scrolling menu">
      <div class="item">
        <div class="content">Foo</div>
      </div>
      (Additional foo items)
    </div>
  </div>
</div>

Check out the demo on jsFiddle

Answer №2

Include this CSS snippet in your project:

.ui.vertical.menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: stretch;
}

.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  flex-shrink: 1;
  flex-grow: 1;
}

This code utilizes justifycontent: strech; along with the flex-shrink and flex-grow properties.

To see a working example, check out this jsfiddle link: jsfiddle.

Adjust the flex parent's height without triggering unnecessary scrollbars or visual issues.

Answer №3

It's important to remember that when implementing a scroll feature, you should use max-height instead of min-height.

   .ui.vertical.menu {
  display: flex;
  flex-direction: column;
}

.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow: auto;
}

Please review the updated code below:

https://jsfiddle.net/r4bxu5ep/

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

Having difficulty with the rendering of a backbone.js collection view. Encountering an issue where I am receiving an error message: "Uncaught TypeError: Cannot call method 'on' of undefined" within my

I'm currently learning backbone.js and I can't seem to figure out why my view is showing up as undefined on line 67 of coupons.js. I've included a gist since the files are quite lengthy. Another issue I'm facing is that if I refresh th ...

javascripthtmljsonbackbone.js

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

assistance in incorporating CSS classes using jQuery

In an attempt to modify the bottom border color of my navigation bar based on the link being hovered over, I want the bottom border color to change to match that of the hovered link. When the link loses focus or hover, the navigation bottom-border should r ...

jqueryhtmlcssdom-manipulation

Looping in jQuery: Tips for Improving Performance

In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...

javascriptjqueryhtmlasp.net

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Does the Sass default compiler have built-in autoprefixing capabilities?

Suppose I have the following sample code: :fullscreen a { display: flex; } Is it possible for the default sass compiler to transform it into this: :-webkit-full-screen a { display: -webkit-box; display: flex; } :-moz-full-screen a { display: fle ...

csssassautoprefixer

Obtain the URL found within the href tags

Is there a way to extract the links from the href tags? When I coded it, the entire 'a' tag is showing up... Here's the code: page = urllib2.urlopen('https://www.meetup.com/') soup = BeautifulSoup(page, 'lxml') categor ...

htmlpython-2.7beautifulsoup

Embarking on the journey of creating mobile web applications - where should you begin?

How can I begin learning to create mobile web apps? I have a keen interest in the design aspects, particularly the effects and animations that give them a native appearance. I suspect there are differences in CSS, HTML, and possibly JavaScript compared to ...

htmlcssmobile

picture is not properly aligned with the right side of the container

I'm struggling to align the image flush with the right border of the div without any margin or padding. I've tried various methods but none seem to work. Hoping someone can provide a solution for me. Thank you. Below is the code snippet: HTML ...

htmlcssimage

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...

javascripthtmlcsspdfjspdf

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

htmlcssflexbox

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

The function I created is having trouble connecting to the controller.js file

My JavaScript controller file function ServicesCtrl($scope) { console.log("Greetings from ServicesCtrl"); $scope.message = "Hello!"; } The main HTML file <html> <head> <title>The Complete Web Development Stack</ti ...

htmlangularjsangularjs-controller

Sibling proximity: an excess of elements separating the regulations

Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...

htmlcsshoverhidesiblings

Bootstrap dropdown menu fails to adapt to updated navbar height

I recently made a modification to the navbar size on my website, increasing it from 50px to 63px by tweaking a line in the bootstrap.css file. The exact code snippet I utilized for this adjustment is as follows: .navbar { position: relative; min ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A hobby project involving the creation of a webmail app using a combination of PHP

As a beginner in web development, I am eager to tackle a hobby project that will help me learn more about PHP and other web-related technologies. I have been considering creating a simple webmail client, but I'm not sure where to begin. I anticipate ...

phphtmlimap

Necessary form group in html [Angular]

Is there a way to make certain form fieldsets required while allowing the user to choose which inputs to fill? My idea: Users can select what they want to fill out without having to complete all of the fieldset inputs. I have these two options: 1: < ...

angularjshtmlforms

What steps can I take to properly center and repair my web page that is currently a mess

This web page I'm working on is giving me a headache. The #titlediv just won't center and the navbar keeps disappearing randomly. It seems like a big issue that I can't wrap my head around. If anyone out there can help salvage it, here' ...

htmlcsscentering

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons. My attempt to programmatically retrieve the icon ...

javascripthtmlcssangularangular-material

Using PHP to create multiple div elements and then concealing them all

I'm having an issue with the hide feature not working. My intention is to hide each dynamically generated div and gain control over them, but the problem seems to lie in the div id incrementing. Any assistance would be greatly appreciated! <?php $ ...

phpjavascriptjquerycss