Experiencing unexpected margin behavior with flex and seeking help for clarification.
Here is a simple HTML structure I am using:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
The SCSS file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
Expectations are set for the inner container to fill up the parent container while maintaining specific margins. However, the horizontal margin appears to extend beyond the parent div.
Uncertain if this issue is related to flexbox.
For further investigation, see an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj