flex-container.min-width: flex-items.min-width?

Question

If i resize the window less than the total of min-width flex-items (here 653px), a scrollbar appears but the flexbox take the current size of the window and flex-items don't get a red background, i would like to know how can i make a min-width for the flexbox container without typing a specific value like

 #topbanner { min-width: 653px; }

I don't want shrink flex-items, but a css way to get that:

flexbox.min-width = (flex_items_min_width += flex-item[n].min-width)

<div id="main">
<div id="topbanner">
    <div id="topbanner_content">
        <div id="topbanner_icon">
            <a href="#">
                <img src="" id="icon"/>
            </a>
        </div>
        <div id="topbanner_searchbar">
            <form method="get" action="">
                <input id="topbanner_searchbar_input" type="text" name="text" placeholder="Search..."/>
                <input type="submit" hidden />
            </form>
        </div>
        <div id="main_button_unlogged">
            <a href="#">Login</a>
            <a href="#">Register</a>
        </div>
    </div>
</div>

https://codepen.io/papawa/pen/oGjMaK/

Answer 1

the flexbox take the current size of the window and flex-items don't get a red background,... ...how can I make a min-width for the flex container without typing a specific value

To solve that you make main an inline element, so it grows with the content, and then for it to behave as a block (take at least full width of its parent), give it min-width: 100%

#main
{
    display:inline-flex;        /*  changed  */
    min-width: 100%;            /*  added  */
    ...

Updated codepen

Stack snippet

 * { box-sizing: border-box; } body { margin:0; padding: 0; background-color: green; } #main { display:inline-flex; min-width: 100%; flex-flow:column; margin: 0; padding: 0; } /* TOPBANNER */ #topbanner { flex: 1 1 auto; margin: 0; padding: 20px; background-color: red; } #topbanner_content { display: flex; align-items: center; } #topbanner_icon { background-color: black; flex: 0 0 auto; height: 120px; width: 120px; } #topbanner_searchbar { flex: 1 1 0; display: flex; } #topbanner form { margin: 0; flex: 1 1 0; display: flex; } #topbanner_searchbar_input { height: 40px; padding-left: 40px; flex: 1 1 auto; border-style: none; border-radius: 5px; font-size: 20px; font-family: sans-serif; color: grey; } /* UNLOGGED */ #main_button_unlogged { flex: 0 0 auto; width: 230px; display:flex; } #main_button_unlogged a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; margin: 0px 2px; height: 40px; border: solid 1px; border-radius: 5px; color: ghostwhite; transition: color .15s ease-in-out; text-decoration: none; cursor: pointer; } 

 <div id="main"> <div id="topbanner"> <div id="topbanner_content"> <div id="topbanner_icon"> <a href="#"> <img src="" id="icon" /> </a> </div> <div id="topbanner_searchbar"> <form method="get" action=""> <input id="topbanner_searchbar_input" type="text" name="text" placeholder="Search..." /> <input type="submit" hidden /> </form> </div> <div id="main_button_unlogged"> <a href="#">Login</a> <a href="#">Register</a> </div> </div> </div> </div>