Flex 搜索字段不会响应 min/max-width

Question

我在 Google 主页上创建了一个文本输入框。我正在为搜索字段线上的所有内容使用 flexbox，并且我试图在调整页面大小时为搜索栏提供最小宽度和最大宽度，但我终究无法让它响应 —它始终默认为 min- 或 max-width 并保持这种状态，无论 window 有多窄。

这是我的 HTML:

的搜索栏部分

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">

  <form id="search-wrapper" name="search-form">
    <div id="searchbar">
      <span class="material-icons-outlined">search</span>
      <input id="search-field">
      <a href="#">
        <img id="search-microphone" src="images/search_mic.png" alt="">
      </a>
    </div>
  </form>

和 CSS:


:root {
    font-size: 10px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}

#search-wrapper {
    margin: 10rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#searchbar {
    display: flex;
    align-items: center;
    width: 70rem;
    min-width: 10rem;
    border: .1rem solid rgba(0,0,0,.3);
    border-radius: 3rem;
    margin: 0 2rem;
    padding: .75rem 1.25rem;
    font-family: "Material Icons";
    font-size: 1.8em;
    color: rgba(0,0,0,.3);
}
#search-field {
    width: 100%;
    margin: 0 1.5rem;
    border: none;
    font-family: Helvetica, sans-serif;
}
#search-microphone {
    width: 2.2rem;
    height: 2.2rem;
}

如果有帮助，here's a CodePen再多一点。

我一直在搜索 Whosebug，寻找看似重复的问题，但到目前为止一直无法找到有效的解决方案。 width、min-width、max-width容器和输入域之间我能想到的每一种组合都试过了child，比如：

在容器上设置 max-width: 70rem，然后在 child

width: 100%

min-width: 40rem

在容器上设置 max-width: 70rem，然后在 child

min-width: 40rem

在容器上设置width: 70rem和min-width: 40rem，然后在child上设置width: 100%（与max-width相反）
在容器上设置 max-width: 70rem 和 min-width: 40rem，然后在 child

width: 100%

在容器上设置无宽度，然后在 child

min-width: 40rem

max-width: 70rem

在容器上设置没有宽度，然后在 child 上设置 width: 70rem 和 min-width: 40rem（以及 max-width 的相反）
在parent上设置min-width: 40rem和max-width: 70rem，然后在child上设置flex: 1，另外两个children flex: 0
将 child 设置为 display: block 并尝试上面列出的各种组合

无论我尝试什么，搜索字段总是显示在 70rem 或 40rem 处，根本不会增大或缩小。我通常可以毫不费力地让 flex 的东西响应；谁能看到我遗漏了什么？

Answer 1

在我看来，因为您正在使用 http link 连接 css 它会覆盖您的个人样式表。几周前我遇到了类似的问题，一个简单的解决方案解决了我的问题。因此，在您认为无法读取代码的地方（在您的情况下是宽度），只需添加！重要的; 造型后。

例如：

#searchbar {

width: 70rem important! ;

}

Answer 2

感谢 Hilal Arsa 的评论指导我最终解决了这个问题。

包括 width: 100% on #search-wrapper, #searchbar, and #search-field PLUS min-width: 40rem and max-width: 70rem on #searchbar 是什么终于做到了：

#search-wrapper {
    margin: 10rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;                    /* added this */
}
#searchbar {
    display: flex;
    align-items: center;
    width: 100%;                    /* here */
    min-width: 40rem;               /* here */
    max-width: 60rem;               /* here */
    border: .1rem solid rgba(0,0,0,.3);
    border-radius: 3rem;
    margin: 0 2rem;
    padding: .75rem 1.25rem;
    font-family: "Material Icons";
    font-size: 1.8em;
    color: rgba(0,0,0,.3);
}
#search-field {
    width: 100%;                    /* and here */
    margin: 0 1.5rem;
    border: none;
    font-family: Helvetica, sans-serif;
}

Flex 搜索字段不会响应 min/max-width

Flex search field won't respond to min/max-width

html

css

flexbox

responsive-design