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/

Sorry; I'm a little confused as to what you're actually looking for. You're saying you would like it so that when the width is shrunk, 'Login' and 'Register' drop down **below** the search bar, rather than being pushed off the page to the right? — Obsidian Age, Sep 17 '17 at 22:07

Asons · Accepted Answer · 2017-09-18T06:15:26.257

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>

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

1 Answers1