https://i.sstatic.net/W30tk.png
Hey there,
I've been encountering some issues with next js
and styled-components
.
I have a parent component (sc-hgRfpC lbMBdR
) with a width of 400px,
and swap-div-5
with a width: 100%
. However, when I add padding: 12px
,
the swap-div-5
component doesn't fit properly into the 100% width, it overflows by 12px.
Does anyone know what might be causing this configuration issue with next js?
.swap-div-5{
width: 100%;
border: 1px solid ${colors.outline};
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
Parent{
width: 100%;
height: 100%;
padding: 24px;
box-shadow: ${boxShadow};
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
Environment: https://www.npmjs.com/package/styled-components "next": "12.3.0"
Appreciate any help!