Absolutely positioned flexbox shrinks involuntarily

Question

I'm building a topbar-style menu and I found a problem with flexbox.

My submenus contain an image that has certain flex-basis. The container seems to ignore it when setting its width for some reason. How can I avoid content overflow in this case? Setting flex-shrink on any of the containers doesn't seem to help.

Here's how it looks like:

The point is to make the orange block as wide as the contents.

.menu {
    background-color: red;
    display: flex;
}

.option {
    background-color: yellow;
    display: flex;
    flex-direction: column;
}

.submenu-container {
    position: relative;
}

.submenu {
    background-color: orange;
    flex-shrink: 0;
    left: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.submenu-item {
    display: flex;
}

.icon {
    flex-basis: 40px;
    flex-shrink: 0;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Menu Bar</title>
    </head>
    <body>
        <div class="menu">
            <div class="option">
                <div>Option</div>
                <div class="submenu-container">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="icon">x</div>
                            <div>Submenu option</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

in the duplicate read the section "flex-basis ignored in a nested flex container. width works." — Temani Afif, Mar 01 '23 at 22:57
@TemaniAfif thanks, indeed `width` works. Not sure if I'd mark it as a duplicate though, because I didn't ask about the difference between those. Sometimes the different case makes for the different question if you know what I'm saying. Perhaps marking my question as a duplicate would prevent others to find their similar case in the future. — Robo Robok, Mar 01 '23 at 23:52
we don't make duplicate based on the title but on the answers. Your answer is within the duplicate so it's a duplicate question and people will find the explanation of your issue there. — Temani Afif, Mar 02 '23 at 00:21

markfila · Answer 1 · 2023-03-01T23:04:48.980

the only way i was able to get it to work was applying background color to each individual div. I created a optionsComponent class and added background color orange.

<!DOCTYPE html>
<html>
<head>
<style>
.menu {
    background-color: red;
    display: flex;
}

.option {
    background-color: yellow;
    display: flex;
    flex-direction: column;
}

.submenu-container {
    position: relative;
}

.submenu {
    flex-shrink: 0;
    left: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.submenu-item {
    display: flex;
}

.icon {
    flex-basis: 40px;
    flex-shrink: 0;
}

.optionComponents{
    background-color:orange;
}
</style>
</head>
<body>
        <div class="menu">
            <div class="option">
                <div>Option</div>
                <div class="submenu-container">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="icon optionComponents">x</div>
                            <div class="optionComponents">Submenu option</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script>
<script type="text/javascript">
    $("#ajax_submit_next").submit(function(e){
        e.preventDefault();
        alert("ready");
    });
</script>
</html>

Absolutely positioned flexbox shrinks involuntarily

1 Answers1