Css – Responsive Search Bar Width Adjustment in React Application

I have a search bar in my header, more specifically the ‘search-text’ input field in the middle section of my header component. I want to set the regular width to 600px and then as the screen gets smaller for the input field to also get smaller until it reaches a min width of 100px and vice versa for it to grow naturally till it reaches 600px again. But for some reason despite everything I’ve tried nothing works, the bar remains at 600px without shrinking naturally. Im literally just trying to copy the flex grow and shrink capabilities of the YouTube search-bar in the header section of the website. Honestly I would also just take a search bar that shrinks and grows naturally for a solution to this as well.

import React from 'react'
import './Header.scss'
import logo from './assets/youtube-logo.svg'
import menu from './assets/hamburger-menu.svg'
import glass from './assets/search.svg'
import mike from './assets/voice-search-icon.svg'
import upload from './assets/upload.svg'
import bell from './assets/notifications.svg'
import pin from './assets/nob.jpeg'

const Header = ({toggler}) => {
  return (
    <div className='header'>
      <div className='left-section'>
        <button className='menu'> 
          <img className='menu-icon' onClick={toggler} src={menu}/>
        </button>
        <a href='/'>
        <img className='you-logo' src={logo}/>
        </a>
      </div>
      <div className='middle-section'>
        <form className='search-form'>
          <div className='search-bar'>
            <input className='search-text' type='search' placeholder='Search'/>
            <button className='search-but'>
                <img className='search-icon' src={glass}/>
                <div className='tooltip'>Search</div>
            </button>
          </div>
          <button type='button' className='voice-but'>
            <img className='voice' src={mike}/>
            <div className='tooltip'>Search with your voice</div>
          </button>
        </form>
      </div>
      <div className='right-section'>
        <button className='upload-container'>
          <img className='upload' src={upload}/>
          <div className='tooltip'>Create</div>
        </button>
        <button className='notify'>
          <img className='notify-icon' src={bell}/>
          <div className='notify-count'>3</div>
          <div className='tooltip'>Notifications</div>
        </button>
        <img className='pin-girl' src={pin}/>
      </div>
    </div>
  )
}

export default Header

.header {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0rem 0.5rem 0.5rem;
  align-items: center;
  width: 100vw;
  gap: 70px;
  position: fixed;
  top: 0;
  z-index: 12;
  .left-section {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      .menu {
          padding: 8px 8px;
          border-radius: 50%;
          border: none;
          display: flex;
          background-color: white;
          margin-right: 12px;
          cursor: pointer;
          .menu-icon {
              height: 25px;
              width: 25px;
          }
          &:hover {
              background-color: rgb(230, 230, 230);
          }
      }
      a {
          .you-logo {
              height: 25px;
          }
      }
  }
  .middle-section {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .search-form{
          display: flex;
          flex-direction: row;
          .search-bar {
              display: flex;
              .search-text {
                  flex-grow: 1;
                  flex-shrink: 1;
                  width: 600px;
                  min-width: 150px;
                  border-bottom-left-radius: 50px;
                  border-top-left-radius: 50px;
                  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
                  border: solid 1px;
                  border-color: rgb(207, 207, 207);
                  padding: 0.5rem 1rem;
                  font-size: large;
                  outline: none;
                  z-index: 5;
                  &:focus {
                      box-shadow: 0 0 0 0.3px rgb(0, 47, 255);
                  }  
              }
              .search-but {
                  padding: 2px 4px; 
                  border-top-right-radius: 50px;
                  border-bottom-right-radius: 50px;
                  border: solid 1px;
                  border-color: rgb(207, 207, 207);
                  border-left: none;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 50px;
                  z-index: 4;
                  cursor: pointer;
                  position: relative;
                  &:hover {
                      background-color:rgb(230, 230, 230);
                  }
                  &:hover .tooltip {
                      font-family: sans-serif;
                      position: absolute;
                      background-color: grey;
                      color: white;
                      padding: 10px 6px;
                      border-radius: 2px;
                      font-size: 12px;
                      transition: opacity 0.15s;
                      pointer-events: none;
                      white-space: nowrap;
                      display: block;
                      bottom: -50px;
                      opacity: 0.8;
                  }
                  .search-icon {
                      height: 25px;
                      width: 25px;
                  }
                  .tooltip {
                      display: none;
                  }
              }
          }
          .voice-but {
              padding: 8px 8px;
              border-radius: 50%;
              border: none;
              display: flex;
              margin-left: 15px;
              position: relative;
              cursor: pointer;
              transition: background-color 0.3s;
              &:hover {
                  background-color:rgb(200, 200, 200);
              }
              &:hover .tooltip {
                  font-family: sans-serif;
                  position: absolute;
                  background-color: grey;
                  color: white;
                  padding: 10px 6px;
                  border-radius: 2px;
                  font-size: 12px;
                  transition: opacity 0.15s;
                  pointer-events: none;
                  white-space: nowrap;
                  display: block;
                  bottom: -50px;
                  right: -40px;
                  z-index: 7;
                  opacity: 0.8;
              }
              .voice {
                  height: 25px;
                  width: 25px;
              }
              .tooltip {
                  display: none;
              }
          }
      }
  }
  .right-section {
      display: flex;
      justify-content: space-between;
      width: 150px;
      margin-right: 30px;
      .upload-container {
          padding: 8px 8px;
          border-radius: 50%;
          border: none;
          display: flex;
          background-color: white;
          cursor: pointer;
          position: relative;
          transition: background-color 0.3s;
          &:hover {
              background-color:rgb(230, 230, 230);
          }
          &:hover .tooltip {
              font-family: sans-serif;
              position: absolute;
              background-color: grey;
              color: white;
              padding: 10px 6px;
              border-radius: 2px;
              font-size: 12px;
              transition: opacity 0.15s;
              pointer-events: none;
              white-space: nowrap;
              display: block;
              bottom: -50px;
              right: -5px;
              z-index: 7;
              opacity: 0.8;
          }
          .upload {
              height: 25px;
              width: 25px;
          }
          .tooltip {
              display: none;
          }
      }
      .notify {
          padding: 8px 8px;
          border-radius: 50%;
          border: none;
          display: flex;
          background-color: white;
          position: relative;
          cursor: pointer;
          transition: background-color 0.3s;
          &:hover {
              background-color:rgb(230, 230, 230);
          }
          &:hover .tooltip {
              font-family: sans-serif;
              position: absolute;
              background-color: grey;
              color: white;
              padding: 10px 6px;
              border-radius: 2px;
              font-size: 12px;
              transition: opacity 0.15s;
              pointer-events: none;
              white-space: nowrap;
              display: block;
              bottom: -50px;
              left: -15px;
              z-index: 7;
              opacity: 0.8;
          }
          .notify-icon {
              height: 25px;
              height: 25px;
          }
          .notify-count {
              background-color: red;
              color: white;
              padding: 5px 8px;
              border-radius: 50%;
              position: absolute;
              font-size: 12px;
              top: -2px;
              right: -1px;
          }
          .tooltip {
              display: none;
          }
      }
      .pin-girl {
          height: 40px;
          width: 40px;
          border-radius: 50%;
          margin-left: 10px;
          cursor: pointer;
        
      }
  }
}

I tried using max width on the ‘search-bar’ div and setting the ‘search-text’ div to width: auto; while keeping flex shrink and grow on it. I tried using chatGBT. I tried changing the order of the properties. Nothing has worked.