sorry for my poorly worded previous question.
I have an element that has position:fixed
and width:100%
. The problem is that none of the parent elements have a fixed width. So my element is actually larger than any of its parent elements.
The implementation of my code is quite complex but I think I was able to simplify things. In the code below you will notice that the green box is larger than its parent elements.
export default function App() {
return (
<div
style={{
width: "100%",
padding: "0px 15px",
boxSizing: "border-box",
height: "80px",
}}
>
<div
style={{
width: "100%",
border: "1px solid blue",
height: "80px",
}}
>
<div
style={{
width: "100%",
border: "1px solid transparent",
height: "80px",
}}
>
<div style={{ width: "inherit", height: "25px" }}>
<div style={{ width: "inherit", height: "25px" }}>
<div
style={{
width: "inherit",
position: "fixed",
height: "25px",
border: "1px solid green",
}}
></div>
</div>
</div>
</div>
</div>
</div>
);
}