My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page:
import styled from 'styled-components';
const ScrollableContainer = styled.div`
overflow-y: visible;
overflow-x: hidden;
height: 700px;
text-align: left;
justify-content: space-between;
cursor: auto;
`;
const TableHeader = styled.header`
position: fixed;
width: 100%;
height: 40px;
background-color: white;
z-index: 9;
line-height: 40px;
`;
export const TestView= () => {
return (
<ScrollableContainer>
<TableHeader>
Text here
</TableHeader>
// some list goes
</ScrollableContainer >
)
};
I am unable to dynamically set the width value since the div needs to adjust according to the screen size.