柔性容器。最小宽度：弹性项目。最小宽度？

Question

如果我调整窗口的大小小于最小宽度flex项目的总数（此处为653px），则会出现一个滚动条，但flexbox采用当前窗口的大小，并且flex项目没有红色背景，我想知道如何在不键入以下特定值的情况下为flexbox容器设置最小宽度：

 #topbanner { min-width: 653px; }

我不希望收缩flex项目，但一个css的方式来获得：

flexbox.min（flex_items_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

flexbox采用窗口的当前大小，flex项目没有红色背景。。。如何在不键入特定值的情况下为flex容器生成min width

要解决将main作为一个内联元素，使其随内容增长，然后使其表现为一个块（至少占其父元素的全宽），请为其指定min width:100%

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

更新代码笔

堆栈片段

*
{
    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>