While working with React and Styled Components, I encountered a problem of elements overlapping each other:
https://i.stack.imgur.com/RuCYu.png
There are a few instances of overlap, including:
- The padding below the
<ul>element is colliding with the button positioned beneath it (which is a React Router Link represented by an<a>tag). - The 'Request Quote' Link is getting overlapped with the
<h2>right below it.
Upon inspecting the code snippet provided below, it's evident that the <div> containing the <ul> and <a> children (configured as a flex column) has a shorter height than the sum of its children, causing it to collapse in some way (if that's the appropriate term).
Interestingly, the <h2> and the said <div>, which were pointed out earlier, do not actually overlap when considering the height of the div container.
I've scoured for solutions on how to prevent this overlap issue but couldn't find any precise explanations for this scenario.
Question: Can someone provide insights on how to properly display these elements without overlaps?
The following represents the code structure corresponding to the aforementioned image:
Highlighted below is only the crucial part of the code; the full code will be shared subsequently.
...
const CartHeaderContainer = styled.div`
display: flex;
flex-direction: column;
padding: 8px;
`;
const HeaderSubContainer = styled.div`
flex-direction: column;
@media (orientation: landscape) {
flex-direction: row;
}
`;
const H1 = styled.h1`
font-size: 1.3rem;
margin: 0 0 0.5rem 0;
`;
const H2 = styled.h2`
font-size: 1.1rem;
margin: 0;
`;
...
<CartHeaderContainer>
<H1>Shopping cart</H1>
<HeaderSubContainer>
<List
data={[
{
title: "Products in cart:",
value: this.props.cartProducts.length
},
{ title: "Total price:", value: `€ 10000` }
]}
titleKeyName="title"
valueKeyName="value"
/>
<ButtonLink to={`/${this.props.match.params.locale}/order/`}>
Request Quote
</ButtonLink>
</HeaderSubContainer>
<H2>Products in cart:</H2>
</CartHeaderContainer>
...