Tips for causing a column to move to the following line once it exceeds the width of the div

My menu is exceeding the boundaries of its container. How can I make sure the overflowing content moves to a new line while staying within the parent element?

Check out an example here

Here is the structure of my HTML:

<div class="product-menu" style="display: flex;">
    <div class="kolom">
        <h2>Woonkamer</h2>
        <ul>
            <li><a href="woonkamer/gordijnen">Gordijnen</a></li>
            <li><a href="woonkamer/zitzak">Zitzak</a></li>
            <li><a href="woonkamer/bootstickers">Bootstickers</a></li>
            <li><a href="woonkamer/plafondoek">Plafondoek</a></li>
             ...

    </div>

I am using display flex to arrange the columns horizontally, but they are not moving to a new line when they exceed the boundaries of the parent product-menu div.

Any suggestions on how to solve this issue?

htmlcssflexbox

Answer №1

Ordinarily, CSS flexbox does not permit items to wrap onto the next line. However, you have the option to enable item wrapping by applying CSS flex-wrap: wrap; to the flexbox container.

To implement this, you can modify the initial line in your HTML to:

<div class="product-menu" style="display: flex; flex-wrap: wrap;">

Upon making this adjustment, please note that your layout may not appear seamless from a design perspective due to some alignment issues, but this should address your immediate concern.

If you are interested, I highly recommend checking out these resources to deepen your understanding of CSS flexbox:

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

Is it possible to obtain the hostname through CSS?

.trPic{ width:640px; height:480px; position:absolute; top:0px; left:0px; width:640px; height:480px; background: url(http://192.168.2.150:8090/?action=stream) no-repeat; border:0px solid #000000; } Is it possible to include a hostname in CSS? For ...

htmlcss

Separating text for tooltips from the element itself

I'm looking to enhance my website by adding tooltip descriptions to elements based on their CSS classes. While tooltips are usually added using the element's title attribute, I have numerous elements with the same lengthy description and want to ...

javascriptjqueryhtmlcsstooltip

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

javascriptjqueryhtml

At times, Chrome fails to load CSS files when requested

Whenever I visit this ASPX page, the stylesheets sometimes fail to load. There is no request made and even checking the network log in Chrome's debugger confirms that it didn't request or load from cache. Interestingly, all other resources such a ...

javascripthtmlcssasp.net

Unable to locate web element using Selenium in C#

Here is the HTML code I am currently using: <div class="modal-footer"> <button class="btn btn-primary" type="button" value="Show Alert" ng-click="questions.getIrMessage()" data-dismiss="modal">Confirm</button> <button class ...

javascriptc#htmlselenium

Auto-closing dropdown menus in the navbar of a Shiny app with Bootstrap

Is there a way to customize the behavior of a shiny navbarMenu so that when I click inside or outside it, the dropdown does not automatically hide? I have seen mentions of using data-bs-auto-close="false" in the Bootstrap documentation, has anyon ...

htmlcssrshinybootstrap-5

The HTML form input allows users to input multiple answers for each field

I am struggling with how to phrase this question properly, but I will do my best. Currently, I have a form that collects information about users' employment history. The structure of my form is as follows: <form name="EmploymentHistory" action="Fo ...

htmlmysqlarraysformsinput

Dynamically Modify Custom Style Class Properties in JavaFX Using CSS

Embarking on my CSS journey, I have limited experience since I mainly worked with JavaFX applications and not web languages. In one of my JavaFX applications, I utilized a css style sheet featuring a Windows 10 UWP theme. The default style classes adhere t ...

javacssjavafxstyling

What steps can I take to implement automation for this traffic light sequence?

document.getElementById('SwitchButton').onclick = automateLights; function turnOnRedLight() { clearAllLights(); document.getElementById('stopLight').style.backgroundColor = "red"; } function turnOnOrangeLight() { clearAllLights( ...

javascripthtmlcss

Unable to retrieve field values from Firestore if they are numeric rather than strings

I need to display this information in a list format: li.setAttribute('data-id', updatesArgument.id);//'id' here unique id Example 1 name.textContent = updatesArgument.data().count;// Works if String Example 2 let i=1; nam ...

javascripthtmlfirebasegoogle-cloud-firestore

PHP code exhibiting inconsistent behavior when executed on a WAMP Server

My WAMP Server is set up and running smoothly as I dive into PHP code for a class assignment. The server icon shines bright green, my HTML and PHP files in the www folder are functioning perfectly. I am currently using PHP v7.0.1 on my WAMP setup. However ...

phphtmlwampexecution

Using ReactJS to capture keydown events from an iframe

I am trying to implement keydown event handling for an iframe within a ReactJS component. The iframe contains an embedded video, and I want to be able to capture keyboard events while the video is playing. Can someone please assist me with how to achieve ...

javascripthtmlreactjsiframekeydown

Using the <img> tag instead of applying background-image with CSS

Currently, I have successfully implemented a background using the CSS background-image property. However, I am interested in utilizing the HTML <img> tag instead. The existing code with the background-image property looks like this: <section class ...

htmlcss

How to use $refs in Vue.js to update the content of a <span> element

In my <template>, I have a <span> element with the reference span-1. <span ref="span-1">my text</span> I am trying to update the content of this <span> from my text to my new text using $refs in my <script> se ...

javascripthtmlvue.jsvuejs2

Extract certain text from an element using a straightforward script

Is there a way to simplify this JavaScript code for splitting specific text from an element? Here is an example of the HTML element: <div id="ReviewBox"> <span>(By:) Hello</span> <div id="ReviewBox"> <span>By: Goodbye</ ...

javascriptjqueryhtmltextsplit

Choosing Text with JavaScript

I am looking to enhance the appearance of text on an HTML page by making it bold. I have implemented the following code: <script type="text/javascript" > function getSelectedText(){ if(window.getSelection){ ; return window.getSelect ...

javascriptjqueryhtmldomselection

Element with adhesive properties alters its color at a particular location

I need the sticky element to change colors at specific points and then revert back to its original color. The color should be orange initially, green on block 2, and orange again on block 3. For the complete code and to address any issues with jQuery, pl ...

javascripthtmljquerycss

Display of CSS color choices organized by row input

Is it feasible to dynamically color each table row based on the input in a designated column for that row? For example: B1 = 1 // Red row B2 = 1 // Red row B3 = 3 // Blue row B4 = 2 // Green row B5 = 1 // Red row And so forth? The datatable wi ...

csscolorsstylingcss-tables

The function 'find' cannot be invoked on an undefined object

I'm currently working on implementing objects in my jQuery code. So far, I have the following: var options = { ul: $(this).find('.carousel'), li: options.ul.find('li') } The li property is causing an error - Cannot call meth ...

javascriptjqueryhtml

What is the best way to eliminate choices from several dropdown lists?

Is there a way to remove a choice made in one dropdown menu from another? I'm not sure if it can be done with dropdown menus or if I need to use datalist or something else. For example, let's say I have 6 dropdown menus like this: dropdown menu& ...

javascriptphpjqueryhtmldrop-down-menu