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

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