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

Question

I have a text input field in my recreation of the Google homepage. I'm using a flexbox for everything on the line with the search field, and I'm trying to give the search bar a minimum width and a maximum width when resizing the page, but I cannot for the life of me make it responsive—it always defaults to the min- or max-width and stays that way regardless of how narrow the window is.

Here's the search bar part of my 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>

And the 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;
}

And if it helps, here's a CodePen with a little more.

I've been scouring StackOverflow looking at questions that seem like duplicates, but have thus far been unable to find a solution that works. I have tried every combination of width , min-width , and max-width I can think of between the container and input field child, such as:

• setting max-width: 70rem on the container, then width: 100% and min-width: 40rem on the child
• setting max-width: 70rem on the container, then just min-width: 40rem on the child
• setting width: 70rem and min-width: 40rem on the container, then width: 100% on the child (as well as the opposite with max-width )
• setting max-width: 70rem and min-width: 40rem on the container, then width: 100% on the child
• setting no width on the container, then min-width: 40rem and max-width: 70rem on the child
• setting no width on the container, then width: 70rem and min-width: 40rem on the child (as well the opposite with max-width )
• setting min-width: 40rem and max-width: 70rem on the parent, then setting the child to flex: 1 and the other two children in the container to flex: 0
• setting the child to display: block and playing around with various combinations listed above

No matter what I try, the search field always displays at either 70rem or 40rem and does not grow or shrink at all. I usually have no trouble making flex stuff responsive; can anyone see what I'm missing?

Answer 1

Thanks to Hilal Arsa's comment for steering me in the direction that finally solved it.

Including width: 100% on #search-wrapper , #searchbar , and #search-field PLUS min-width: 40rem and max-width: 70rem on #searchbar is what finally did it:

#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

In my opinion, because you are using a http link to connect the css it overlays with your personal stylesheet. I had similar issue few weeks ago and a simple solution solve my problem. So, on the place that you think that your code can't be read(in your case the width), simply add;important. After the styling.

So in example:

#searchbar {

width: 70rem important! ;

}