Currently, I am working with two parent flex items, arranged with flex-direction: column.
Within the first parent, there are two children. However, one of the children is optional and may be removed at times.
I aim to have the optional child displayed on top of the other child consistently. Regardless of whether the optional content is added or removed, the layout should remain unaffected.
I attempted to utilize negative margin on the optional child (as indicated in the commented CSS). Yet, this resulted in an overlap with the outer parent positioned below the first parent along with its children.
Why does this occur, and how can I successfully overlap these two children while maintaining the integrity of the outer parents?
<div class='container'>
<div class='parent'>
<div class='child'>
content
</div>
<div class='child optional'>
more content
</div>
</div>
<div class='parent'>
content
</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.parent {
width: 10vw;
border: 1px solid black;
}
.child {
border: 1px solid red;
height: 50px;
}
.optional {
/* margin-top: -60px; */
}