I've been playing around with CSS and running into a problem where a flexbox item isn't respecting margin and padding correctly, causing the right side to have no margin. Here's a simplified example I came up with:
<body>
<div class="flexbox">
<div class="elem">
This is an element that doesn't need to be full width.
</div>
<div class="elem" style="width: 100%;">
This is an element that doesn't need to be full width.
</div>
</div>
</body>
<style>
.flexbox {
padding: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.elem {
margin-top: 1rem;
padding: 2rem;
background-color: aqua;
}
</style>
Here's what it looks like visually: https://i.sstatic.net/QcUVF.png
Please keep in mind:
- I'm required to use
width:100%due to framework constraints. - Using
align-self:stretchworks fine but unfortunately, I can't implement it here.
Thanks for your help :)