The flex container cannot contain all of the content due to an

I am looking to implement a flexbox dropdown menu similar to this:

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

After researching online, I found a simple dropdown menu example. However, I want to customize it using flexbox and its properties. The issue I encountered is that the flexbox container does not adjust its height based on the dynamic number of elements in a column.

This is the outcome I achieved:

https://i.sstatic.net/9HToh.png

The code snippet can be viewed below:

* {
    font-family: sans-serif;
}
@font-face {
    font-family: Oxygen;
    src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
    margin: 0;
    background-color: #cbcbcb;
}
nav {
    position: relative;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-color: black;
}
nav ul {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}
nav a {
    text-decoration: none;
    color: #777;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
}
nav a:hover {
    color: #000;
}
.logo a {
    font-size: 25px;
}
nav ul {
    list-style: none;
}
li > ul.drop-menu {
    display: none;
}
li:hover > ul.drop-menu {
    position: absolute;
    top: 100%;
    background-color: white;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.drop-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.drop-col > ul {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 0;
}
.drop-header {
    font-size: 18px;
    font-family: sans-serif;
    color: #ff3546;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navbar</title>
    <script src="live.js"></script>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <nav>
        <ul class="left">
            <li class="logo"><a href="#">SoulOTrip</a></li>
            <li >
                <a href="#">Adventure Trips</a>
                <ul class="drop-menu">
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Airforce</li>
                            <li>Flying fox</li>
                            <li>Bungee Jumping</li>
                            <li>Paragliding</li>
                        </ul>
                    </div>
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Army</li>
                            <li>Skiing</li>
                            <li>Mountaineering</li>
                            <li>Trekking</li>
                            <li>Rock Climbing</li>
                        </ul>
                    </div>
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Navy</li>
                            <li>River Rafting</li>
                            <li>Parasailing</li>
                            <li>Scuba Diving</li>
                            <li>Swimming</li>
                            <li>Kayaking</li>
                            <li>Surfing</li>
                        </ul>
                    </div>
                </ul>
            </li>
            <li><a href="#">Top Destinations</a></li>
            <li><a href="#">Explore</a></li>
        </ul>
        <ul class="right">
            <li class=""><a href="#">Username</a></li>
            <li class=""><a href="/login">Login</a></li>
            <li class=""><a href="/register">Register</a></li>
        </ul>
</nav>
</body>
</html>

Answer №1

The issue lies in mistakenly targeting the drop-down menu, which is also limiting it to a height of 50px. To correct this, adjust the selector from

nav ul { 
   /* this impacts all ul elements within the nav, including the first level
      .left and the .drop-menu */ 
}

to:

nav > ul { /* <- this only targets the direct child (ul.left) */ }

An alternative solution would be modifying the height declaration to min-height.

* {
    font-family: sans-serif;
}
@font-face {
    font-family: Oxygen;
    src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
    margin: 0;
    background-color: #cbcbcb;
}
nav {
    position: relative;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-color: black;
}
nav > ul {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}
nav a {
    text-decoration: none;
    color: #777;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
}
nav a:hover {
    color: #000;
}
.logo a {
    font-size: 25px;
}
nav ul {
    list-style: none;
}
li > ul.drop-menu {
    display: none;
}
li:hover > ul.drop-menu {
    position: absolute;
    top: 100%;
    background-color: white;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.drop-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.drop-col > ul {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 0;
}
.drop-header {
    font-size: 18px;
    font-family: sans-serif;
    color: #ff3546;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navbar</title>
    <script src="live.js"></script>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <nav>
        <ul class="left">
            <li class="logo"><a href="#">SoulOTrip</a></li>
            <li >
                <a href="#">Adventure Trips</a>
                <ul class="drop-menu">
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Airforce</li>
                            <li>Flying fox</li>
                            <li>Bungee Jumping</li>
                            <li>Paragliding</li>
                        </ul>
                    </div>
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Army</li>
                            <li>Skiing</li>
                            <li>Mountaineering</li>
                            <li>Trekking</li>
                            <li>Rock Climbing</li>
                        </ul>
                    </div>
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Navy</li>
                            <li>River Rafting</li>
                            <li>Parasailing</li>
                            <li>Scuba Diving</li>
                            <li>Swimming</li>
                            <li>Kayaking</li>
                            <li>Surfing</li>
                        </ul>
                    </div>
                </ul>
            </li>
            <li><a href="#">Top Destinations</a></li>
            <li><a href="#">Explore</a></li>
        </ul>
        <ul class="right">
            <li class=""><a href="#">Username</a></li>
            <li class=""><a href="/login">Login</a></li>
            <li class=""><a href="/register">Register</a></li>
        </ul>
</nav>
</body>
</html>

Answer №2

If my understanding of the ultimate goal is correct, you are aiming to modify nav ul { height: 50px; } to min-height: 50px

* {
    font-family: sans-serif;
}
@font-face {
    font-family: Oxygen;
    src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
    margin: 0;
    background-color: #cbcbcb;
}
nav {
    position: relative;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-color: black;
}
nav ul {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}
nav a {
    text-decoration: none;
    color: #777;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
}
nav a:hover {
    color: #000;
}
.logo a {
    font-size: 25px;
}
nav ul {
    list-style: none;
}
li > ul.drop-menu {
    display: none;
}
li:hover > ul.drop-menu {
    position: absolute;
    top: 100%;
    background-color: white;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.drop-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.drop-col > ul {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 0;
}
.drop-header {
    font-size: 18px;
    font-family: sans-serif();
    color: #ff3546;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navbar</title>
    <script src="live.js"></script>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <nav>
        <ul class="left">
            <li class="logo"><a href="#">SoulOTrip</a></li>
            <li >
                <a href="#">Adventure Trips</a>
                <ul class="drop-menu">
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Airforce</li>
                            <li>Flying fox</li>
                            <li>Bungee Jumping</li>
                            <li>Paragliding</li>
                        </ul>
                    </div>
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Army</li>
                            <li>Skiing</li>
                            <li>Mountaineering</li>
                            <li>Trekking</li>
                            <li>Rock Climbing</li>
                        </ul>
                    </div>
                    <div class="drop-col">
                        <ul>
                            <li class="drop-header">Navy</li>
                            <li>River Rafting</li>
                            <li>Parasailing</li>
                            <li>Scuba Diving</li>
                            <li>Swimming</li>
                            <li>Kayaking</li>
                            <li>Surfing</li>
                        </ul>
                    </div>
                </ul>
            </li>
            <li><a href="#">Top Destinations</a></li>
            <li><a href="#">Explore</a></li>
        </ul>
        <ul class="right">
            <li class=""><a href="#">Username</a></li>
            <li class=""><a href="/login">Login</a></li>
            <li class=""><a href="/register">Register</a></li>
        </ul>
</nav>
</body>
</html>

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

``Please proceed with the form submission only if it has been verified and

Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

Is there a way to prioritize the table row background color over the cell input elements background color?

After a user selects a table row, the row is assigned the class below: tr.selected { background-color:#FFA76C; } However, if there are input fields in the cells with background colors, they end up overriding the row's background color. (For instance ...

Issue with displaying jQuery 3.5.1 mobile CSS formatting on live server preview using Visual Studio Code

Despite my best efforts, I can't seem to make the jQuery CSS stylesheet work properly. I've been using the live preview extension in VSCode and got the CSS directly from the jQuery website. <!DOCTYPE html> <html> <head> < ...

Replace !important with JavaScript/jQuery when using animate()

I need to animate the background-position-x, but there is a background-position: 0 0 !important; set in the css that cannot be removed. Is it possible to work around this using JavaScript? My jQuery code is functioning as intended, but it is being overridd ...

CSS - Height not working properly on mobile device model iPhone 6

I've been working on a seemingly simple problem for some time now without success! The issue involves a <header> element with a height of 100px. When the screen size reaches a certain breakpoint (specifically targeting mobile devices), I need ...

Resolve the issue of text overflow in PrimeNG Turbo Table cells

When utilizing Primeng table and enabling the scrollable feature, the table is expected to display a scrollbar while ensuring that the text within the cells does not overflow. Unfortunately, this expected behavior is not occurring. To see an example of th ...

Rule for restoring scroll position upon reloading web pages in browsers

When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...

Ways to make the Bootstrap form's fields align horizontally

I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...

I'm having trouble pinpointing the issue in my code

For some reason, the first button in the div in this code is not working on HTML files. I have tried multiple JavaScript and HTML validators but none of them seem to work. Surprisingly, it works fine on codecademy.com and w3schools.com, but the issue persi ...

What steps should I take to insert a divider in a dropdown menu?

I am attempting to enhance my dropdown menu by incorporating a separator using the following code: <li class='divider'></li> Below is my HTML code with the separator included: <ul class="dropdown-menu dropdown-menu-right" id="ul ...

Brother or sister is never empty, as every comment is considered an entity

When going through a list of jQuery objects, I want to verify if the nextSibling attribute is null. However, I found that an HTML comment also counts as a sibling object. How can I address this issue? I am looking for an if statement that will trigger fo ...

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

Transitioning the CSS background for a lightbox display

I am currently experimenting with creating an image that fades in along with its background when clicked using the :target selector. (Similar to Lightbox: , but done purely with CSS). Here is the HTML: <a href="#firstimg"><img src="img/thumb-3.j ...

Creating padding for a Drawer component in Material-UI with React JS

I'm struggling to set a marginTop for my Drawer within the Drawer class component. Here's the code I've been working with: const theme = createMuiTheme({ root: { marginTop: '40px' }, }) class PageMenu extends React ...

Tips for Passing Data Using Ajax Function in JavaScript

I've been working on creating an AJAX favorite button in PHP that behaves similar to Instagram and Twitter. Everything seems to be in order with my code, and I've attempted to make it work using the following steps: PHP Code: $user_id = $_SESSI ...

What is the method for generating an oval shape with a border-radius in CSS?

Is there a way to create an oval shape instead of a rectangle with rounded edges using CSS? Below is the code snippet I have been working with: div { position: fixed; border-radius: 25px; background: rgba(0,0,0,.5) width: 100px; height: 50px; ...

Exploring the Possibilities of Manipulating HTML Tables with CSS

Looking for a solution to rearrange the layout of a html table with 2 cells in a row? Want to make the second cell appear below the first one instead of next to it using only CSS? It may require a bit of a "dirty hack", but the desired outcome is still n ...

The Selenium Webdriver's isSelected() method in Chrome browser does not return true for radio buttons

I have been attempting to confirm whether my radio button is selected or not, but I keep receiving a false value even after selecting the radio button. Here is the HTML code: <div class="controls tss-radio-text-format"> <label class= ...

Switching the character from "." to "|" between portfolio categories on a WordPress website: Step-by-step guide

Visit Portfolio Page I have an unusual request - I need to replace the tiny dot between "Graphic Design" and "Website Design" with a vertical bar "|". I thought I could do this in portfolios.php, but I can't locate the dot in the file. In the inspect ...