以百分比形式输入的css宽度属性不会生效

在try 设置搜索栏的宽度时，我遇到了一个奇怪的问题.以下是我的部分HTML代码.

<header class="header-main">
     <div class="header-main-logo">
          <a href="index.php" class="logo">LOGO</a>
     </div>
     <div class="search-container">
      <form method="get" action="search.php?page" class="search-form">
           <input class="search-bar" type="search" name="query" value='<?php echo isset($_GET["query"]) ? trim($_GET["query"]) : "" ?>' placeholder="Search">
               <div class="search-btn">
           <input type="hidden" name="page" value="1">
               <button type="submit" name="search" value="1">Search</button>
               </div>
          </form>
     </div>
</header>

这是我的css代码

.header-main {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    background-color: rgb(107, 23, 23);
    display: flex;
    justify-content: space-between;
}

.search-container {
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    background-color: rgb(51, 52, 59);
    display: flex;
    align-content: center;
}

.search-container .search-bar {
    box-sizing: border-box;
    border: 1px solid rgb(60, 255, 0);
    height: 40px;
    width: 100% !important;
    cursor: text;
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);
    background-color: rgb(248, 248, 248);
    align-self: center;
}

如果我将宽度设置为.search-container .search-bar%，它不会生效，但如果我输入一个值，如400px，它就会起作用.我希望它是在百分比，以便它是动态的页面大小.

我以为它只是将宽度设置为一个HTML元素.我希望搜索占据其父级的全宽，即搜索容器.