flex-container.min-width：flex-items.min-width？

Question

如果我调整窗口的大小小于最小宽度的flex-items的总和（此处为653px），则会出现一个滚动条，但flexbox会采用当前窗口的大小，而flex-items不会显示红色背景，我想知道如何在不输入特定值的情况下为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

flexbox会采用当前窗口的大小，而flex-items不会显示红色背景，... ...如何在不键入特定值的情况下为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>