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

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

javascripthtmlcss

Trouble with Background Image Display in Internet Explorer 8

I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...

javascriptjqueryhtmlcss

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Tips for personalizing the color scheme of Material UI Stepper Step?

I need help customizing the disabled Step color for Material UI Steppers. The default colors are Blue for enabled steps and Grey for disabled steps, but I want to change it to a different color as shown in this example: https://i.stack.imgur.com/HGGxp.png ...

javascriptcssreactjsmaterial-ui

The way images appear can vary between desktop and mobile devices

I am in the process of creating a photography website with a simple goal of displaying images down the page one after another. However, I am encountering issues with uniform display across various desktop and mobile platforms. The site appears perfect on i ...

htmlcssmobile-websitedisplayphotography

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

I have developed a simple jQuery plugin and uploaded it to Github. I am using both the Github website and Github for Windows to manage this project. However, when I try to include the .js or .css files from Github using the Raw links, my browser fails due ...

javascriptjquerycssgithubgithub-for-windows

The issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

My implementation of collapsible in a plain HTML page looks like this: <!DOCTYPE html> <html> <head> <title></title> <style> button.accordion { background-color: #777; color: white; cursor: pointer; p ...

javascripthtmlcssangular

Issue with CSS animations not functioning correctly within React application

Currently in the process of creating a basic dice roller and aiming to incorporate a spin animation for added visual interest. Strangely, the animation only triggers on the first roll and not on subsequent attempts (unless I refresh the page). Here is the ...

cssreactjsreact-hooks

Is it possible to send a search query to thesaurus.com using HTML code on a webpage?

I've created an HTML page with a text field and a submit button. When the user enters a word in the text field and clicks submit, a servlet fetches the input using request.getParameter(). Now, I need assistance implementing functionality to send this ...

javahtml

Filter out all elements that come before the comma in the sorted array's output

Looking for a solution to modify my code so the output is just "Bothell" without the comma and count part. let As = document.getElementsByTagName('a'); let towns = new Map(); for(let a of As) { let town = a.textContent.split(',') ...

javascripthtmljquery

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names: function rotateAllBoxes() { var boxes = document.getElementsByClassName("box"); for (var i = 0; i < box ...

javascriptcss

Launch the jQuery Fancybox on a separate webpage

I am facing an issue where I have a link in my index.html page and I need it to open a div located in another page named index2.html, but for some reason, it is not working. This is the code I currently have: Link in index.html <a href="#modal" id="o ...

javascriptjqueryhtmlcss

Having difficulties redirecting with the button's onclick function

I'm struggling to redirect users to another page using a button (assuming the hostname is localhost:8000) $('#getFruit').attr('onclick', window.location.host + '/getFruit/banana') <script src="https://cdnjs.cloudfl ...

javascripthtml

How can I determine the specific quantity of XPATH links with unique identifiers in Selenium?

Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...

pythonhtmlselenium

Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...

csscss-transitions

Hover shows no response

I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected. I've considered replacing the i tag with an a, and have also tried using both display: none and display: bloc ...

javascripthtmlcssangulartypescript

When the user clicks, show a designated search result in a separate container

I've been developing my Angular cocktail application, and I've reached a point where I can display all the cocktails in my database (only showing names). Now, I want to implement a feature where if I click on a specific cocktail, its full content ...

javascriptjqueryhtmlangularjs

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

javascriptjqueryhtmlcssbootstrap-modal

Refreshing Django HTML table dynamically upon database updates

Currently, I have an HTML table set up using a Django template to showcase data from my database. I am looking to ensure that this table remains updated in real-time whenever the database undergoes changes. Despite my research efforts, there is limited inf ...

htmlajaxdjangodatabaseweb-applications

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

javascripthtmlcssdom