Search bar won't stay at top with CSS position: sticky property

Question

I am trying to make a search bar stay at the top of a div with position: sticky but the property doesnt seem to work. Googling it, I see that overflow: hidden and overflow: hidden on a parent element can make it unresponsive if there is no height specified but I have a height specified so I don't think that's it. Here is the relevant CSS:

    .container {
      background-color: white;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      border-radius: 1rem;
      height: 85vh;
      width: 60vw;
      overflow-y: scroll;
      overflow-x: hidden;
      margin: auto;
    }

    .search-bar {
      position: sticky;
      top: 0;
      margin: 1rem 1rem;
      padding: 0.5rem;
      font-size: 20px;
      width: 100%;
      display: block;
      outline: 0;
      border-width: 0 0 2px;
    }

Note that .search-bar is a child element of .container. If needed, here is the JSX file (it's a react app):

    import React, { useState, useEffect } from 'react';
    import { average } from './utils/util.js';
    import Card from './components/Card/Card';

    import './App.css';

    function App() {
      const [loading, setLoading] = useState(true);
      const [query, setQuery] = useState({ name: '', tag: '' });
      const [users, setUsers] = useState([]);

      const [filteredUsers, setFilteredUsers] = useState([]);

      return (
        <div className='container'>
          <input
            className='search-bar'
            placeholder='Search by name'
            onChange={(e) => {
              setQuery({ ...query, name: e.target.value });
            }}
          />
          <input
            className='search-bar'
            placeholder='Search by tag'
            onChange={(e) => {
              setQuery({ ...query, tag: e.target.value });
            }}
          />
          {filteredUsers.map((user) => (
            <Card
              id={user.id}
              pic={user.pic}
              name={`${user.firstName} ${user.lastName}`}
              email={user.email}
              company={user.company}
              skill={user.skill}
              average={average(user.grades)}
              grades={user.grades}
              tags={user.tags}
              onTagChange={tagChange}
            />
          ))}
        </div>
      );
    }

    export default App;

Answer 1

I tried to reproduce your issue here,

https://codesandbox.io/s/winter-breeze-5spod8?file=/src/styles.css

but it seems to work fine with your code. The only thing I changed was to add two .search-bar classes and height into it, because you have two input elements which you want sticky and they start to overlap on each other when we start scrolling.

.container {
  background-color: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 1rem;
  height: 85vh;
  width: 60vw;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: auto;
}

.search-bar1 {
  position: sticky;
  top: 0;
  margin: 1rem 1rem;
  padding: 0.5rem;
  font-size: 20px;
  width: 100%;
  height: 3%;
  display: block;
  outline: 0;
  border-width: 0 0 2px;
}

.search-bar2 {
  position: sticky;
  top: 5.8%;
  margin: 1rem 1rem;
  padding: 0.5rem;
  font-size: 20px;
  width: 100%;
  height: 3%;
  display: block;
  outline: 0;
  border-width: 0 0 2px;
}