I was having a lot of trouble with my blog content preview layout not behaving as I intended in regards to responsiveness with my mix of conditional rendering and sticky positioning. I have a sticky Header component and also want my blog content preview that is inside my main element to stick below the header. Getting the sticky behavior and the right heights and positioning was causing problems. I found the main culprit to be several excessive defined height attributes. The original intention of defining those heights was to ensure the particular elements either spanned the whole height of their container or had a fixed height that I could reference in a workaround to make my sticky positioned elements properly offset.
However, after hearing advice to avoid setting element heights unless needed, I began to go through my structure testing the removal of defined heights and was able to utilize flex properties like flex grow instead. To fully achieve the desired layout and sticky behavior I also set a css variable in a useEffect of my Header component that I now use for my sticky element's top attribute so it stays below the header and in calculation of its max height. This variable updates whenever the window is resized and lets the sticky element dynamically adjust to the header height instead of using a magic number.