Flex 搜索字段不会响应最小/最大宽度

Question

我在重新创建的 Google 主页中有一个文本输入字段。我对搜索字段上的所有内容都使用了弹性框，并且在调整页面大小时尝试为搜索栏提供最小宽度和最大宽度，但我终其一生都无法让它响应——它始终默认为最小或最大宽度，无论窗口有多窄，它都会保持这种状态。

这是我的 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 再多一点。

我一直在搜索 StackOverflow，寻找看似重复的问题，但迄今为止无法找到有效的解决方案。我已经尝试过width、min-width和max-width我能想到的容器和输入字段child之间的每一种组合，例如：

• 在容器上设置max-width: 70rem，然后在子容器上设置width: 100% 和min-width: 40rem
• 在容器上设置max-width: 70rem，然后在子容器上设置min-width: 40rem
• 在容器上设置width: 70rem 和min-width: 40rem，然后在孩子上设置width: 100%（以及与max-width相反）
• 在容器上设置max-width: 70rem 和min-width: 40rem，然后在子容器上设置width: 100%
• 在容器上不设置宽度，然后在子容器上设置 min-width: 40rem 和 max-width: 70rem
• 在容器上不设置宽度，然后在子级上设置width: 70rem 和min-width: 40rem（以及与max-width 相反）
• 在父级上设置min-width: 40rem和max-width: 70rem，然后将子级设置为flex: 1，将容器中的其他两个子级设置为flex: 0
• 将孩子设置为 display: block 并玩弄上面列出的各种组合

无论我尝试什么，搜索字段始终显示为 70rem 或 40rem，并且根本不会增长或缩小。我通常可以毫不费力地让 flex 的东西做出响应；谁能看到我错过了什么？

Answer 1

感谢 Hilal Arsa 的评论引导我朝着最终解决问题的方向前进。

包括width: 100% on #search-wrapper、#searchbar 和#search-field PLUS min-width: 40rem 和max-width: 70rem on max-width: 70rem 最终做到了：

#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;
}

Answer 2

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

例如：

#searchbar {

width: 70rem important! ;

}