html - flex-container.min-width : flex-items. 最小宽度？

Question

如果我调整窗口的大小小于最小宽度 flex 元素的总和(这里是 653 像素)，则会出现一个滚动条，但 flexbox 采用窗口的当前大小并且 flex 元素不会得到红色背景，我想知道如何在不输入特定值的情况下为 flexbox 容器设置最小宽度

 #topbanner { min-width: 653px; }

我不想收缩 flex-items，而是一个 css 方法来实现:

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

为了解决这个问题，您使 main 成为一个内联元素，因此它会随内容一起增长，然后让它表现为作为一个 block (至少占据整个宽度它的父级)，给它 min-width: 100%

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

Updated codepen

堆栈片段

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