What are the best methods for creating a significant gap in a flexbox layout?

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

I created a menu using flexbox to have only two columns and vertical scrolling for multiple menus. However, I am facing spacing issues between the menus when one menu has many children. Here is the code snippet along with the CSS I have used so far. Can someone help me resolve this problem?

.menu-dropdown{
  height: 200px;
  overflow:auto;
}
.wrapper-container{
  min-width: 560px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 300px;
}

.menu-item{
  max-width: 50%;
  width: fit-content;
  display: flex;
}
<div class="menu-dropdown">
  <div class="wrapper-container">
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>

htmlcss

Answer №1

Unfortunately, row-flex won't do the trick in this situation. And column-flex isn't the solution for achieving a vertical scroll either. The desired behavior can be achieved using columns:

.wrapper-container{
  columns: 2;
}
.menu-item{
  break-inside: avoid-column;
}

Take a look at this example on codepen

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

When the CSS is rendered, it automatically appends a forward slash

I have successfully implemented CSS on the page. @font-face { font-family: "feather"; src:url("fonts/feather-webfont.eot"); src:url("fonts/feather-webfont.eot?#iefix") format("embedded-opentype"), url(&qu ...

css

Tips for creating multiple row tabs in Material UI Tabs

Currently, I have close to 30 tabs housed within Material UI Tabs. In order for the user to view all tabs, they must scroll two times. I am seeking a solution to display the tabs in two rows with a scroll, as opposed to one row with scroll. This would al ...

cssreactjstabsmaterial-ui

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

http://jsfiddle.net/bUjx7/42/ <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'> </script> <script type='text/javascript'> $(document).ready(function () { $('.fieldreplace ...

javascriptjqueryhtmlcss

Chrome failing to import images, but Firefox has no issues with image importing

I'm not very familiar with JavaScript or jQuery, but I was attempting to troubleshoot a functionality that was previously created. The issue is that it works fine on Firefox, but it fails on Chrome. I am importing an image and then cropping the necess ...

javascripthtmlcsscanvas

The images on the carousel fail to load unless I adjust the window size

After investing countless hours into finding a solution, I am still unable to resolve this issue. The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image ...

javascripthtmlcssswiper.js

Display a div when hovering over it, with its position set from the bottom of the main

I am attempting to use CSS to display another div within my main div, but positioned from the bottom of the main div rather than as a block as I am currently testing with my code. HTML <div id="main"> <a href="#"><img src="https://www.g ...

htmlcss

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below: <li name="luxury" class="cars luxury> <div id="featured_lux" name="featured" class="carImg_lux col2_lux "> My Luxury Car<img border="0" class="car-im ...

javascriptjquerycss

Deciphering the sequence of operations in a CSS style sheet

Review the CSS stylesheet below: #start_experiment_button { display: inline-block; color: black; border: 3px outset gray; background-color: #CCCCCC; padding: 8px; text-decoration: none; font-family: Arial, Helvetica; font-weight: bol ...

css

Is it possible to dynamically alter CSS using PHP?

Here's a little query on my mind. Is it possible to dynamically alter the content of a CSS style using PHP in this manner? <?php header("Content-type: text/css; charset: UTF-8"); $color = "red;"; ?> header { color:<?php print $co ...

phpcss

Tips for avoiding content appearing beneath overlapping elements

I am facing an issue with a hero image that has an overlapping box. I want to add content below the box but it ends up appearing behind the box. How can I ensure that the content shows below the box while maintaining responsiveness? .shell { display: ...

htmlcssflexbox

Calculating the Quantity of Checked Boxes and Verifying them All

When retrieving values from my Database, there are instances where I need to check multiple rows for deletion or update. It's important to keep track of how many rows have been selected. What I am looking for is: -- The number of selected checkboxes ...

phphtmlcheckbox

Using require to access an Immediately Invoked Function Expression variable from another file in Node.js

File 1 - Monitor.js var MONITOR = (function () { // Code for Monitoring return { doThing: function() { doThing(); } }; })(); File 2 - Test.js var monitor = require('../public/js/monitor.js'); I am trying to access the doThing() funct ...

javascripthtmlnode.jsnode-modules

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

javascriptjqueryhtmlcssdom

Troubleshooting problem with JQuery window printing capability

After creating a paper with dimensions of 21.0 cm width and 29.7cm height, I encountered an issue where the printer output three papers instead of just two. I am not sure where I went wrong in my setup. You can find the source code here. window.print(); ...

jquerycssgoogle-chromeprintingwindow

Tips for achieving proper styling and formatting of elements in jQuery UI

I've encountered an issue when trying to use jQuery UI after downloading it multiple times. In the examples provided with the download, the UI elements appear perfectly formatted, but when I implement them on my own pages, the styles and formatting ge ...

javascripthtmljquery-uiasp.net

Is there a way to conceal the loading screen until the website has completely loaded?

I've been working on my personal portfolio/website and encountered a bug that I can't seem to fix on my own. The issue is with the logo (aa) and text under it showing even after the content page has fully loaded, taking around 3 seconds to hide. ...

javascriptjqueryhtmlcss

Turn off a feature on older buttons

For my project, I am looking to dynamically add specific elements like buttons. However, every time a new button is added, the function call for the old button gets duplicated. var btnElem ='<button type="button"class="doSomething">Button< ...

javascriptjqueryhtml

Tips for maintaining a seamless look with image wrapping on a single line

I'm having an issue with my code – the image is appearing below the input box instead of beside it. Can anyone spot the mistake? <input type="text" name="test" /> <div style="float:left"><img src="test.jpg" /></div> ...

css

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

I am in the process of creating a website that features a fixed (non-sticky) footer placed behind the main content using the z-index property. The footer only becomes visible when the user scrolls to the bottom of the page, achieved by assigning a margin-b ...

javascripthtmljquerycss

Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small ...

htmlcssbootstrap-4flexbox