HTML/CSS搜索栏宽度无法调整问题求助

问题 #

编写HTML/CSS时遇到搜索栏无法加宽的问题：调整.search-bar的width属性甚至加!important都没有效果，相关代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <style>
            .search-button,.I-am-Feeling-Lucky
            {
                background-color: rgb(248,249,250);
                border: 1px solid rgb(248,249,250);
                border-radius: 4px;
                color: rgb(60 64 67);
                font-family: arial,sans-serif;
                font-size: 14px;
                margin: 11px 4px;
                padding: 0 16px;
                line-height: 27px;
                height: 36px;
                min-width: 54px;
                text-align: center;
                cursor: pointer;
                user-select: none;
                white-space: nowrap;
            }
            .search-bar
            {
                border: 1px solid rgb(206 212 218);
                font-size: 16px;
                padding: 20px;
                width: 100%;
                border-radius: 20px;
            }
            .Search-Bar-Section
            {
                display: flex;
                width: 100%;
                max-width: 800px;
            }
            .Lower-Section
            {
                width: 100%;
                height: 80vh;
                display: flex;
                position: relative;
                justify-content: center;
                align-items:center;
                flex-direction: column;

            }

        </style>
    </head>
    <body>       
        <div class = "Header">
            header
        </div>
        <div class = "Lower-Section">

            <div>
                <img src="photos\googlepng.png" alt ="Google">
            </div>

            <div>
                <form action="https://www.google.com/search">
                    <div class = "Search-Bar-Section">
                        <input class = "search-bar" type="text" name="q">
                    </div>
                    <div>
                        <button class = "search-button" type="submit">Google Search</button>
                        <button class = "I-am-Feeling-Lucky" type="submit" name="btnI">I am Feeling Lucky</button>
                    </div>
                </form>
            </div>

        </div>
    </body>
</html>

原因 #

1. 盒模型计算逻辑问题：.search-bar设置了width:100%和padding:20px，默认content-box盒模型下，元素总宽度=内容宽度+左右padding+边框宽度，导致元素超出父容器.Search-Bar-Section，浏览器会自动压缩内容宽度来适配父容器，所以调整width属性看起来没有效果。
2. Flex容器默认收缩行为：.Search-Bar-Section是flex容器，子元素默认带有flex-shrink:1属性，当元素超出容器宽度时会自动收缩，进一步限制了搜索栏的宽度表现。

解决方法 #

方法1：修改盒模型为border-box #

给.search-bar添加box-sizing: border-box，让padding和边框被包含在width的计算范围内，width:100%就会刚好填满父容器，不会出现溢出：

.search-bar {
    border: 1px solid rgb(206 212 218);
    font-size: 16px;
    padding: 20px;
    width: 100%;
    border-radius: 20px;
    box-sizing: border-box; /* 添加此行 */
}

方法2：利用Flex布局占满可用空间 #

替换width:100%为flex:1，让搜索栏在flex容器中自动占满所有可用空间，同时配合box-sizing: border-box避免padding导致的溢出：

.search-bar {
    border: 1px solid rgb(206 212 218);
    font-size: 16px;
    padding: 20px;
    border-radius: 20px;
    flex: 1; /* 替换width:100% */
    box-sizing: border-box;
}

如果想要让搜索栏整体更宽，直接调整.Search-Bar-Section的max-width值即可，比如将max-width: 800px修改为1000px。

内容的提问来源于stack exchange，提问作者yakir'sCode