Issue
Here the red box is the parent div which does not have any overflow property set. The orange and gray boxes are its children. What I want is to know is whether it is possible for one of the child to overflow the other to not?
.rootdiv {
width: 300px;
height: 300px;
background: red;
border: solid;
position: relative;
overflow: hidden;
}
.rootdiv .not-overflow {
border: dashed;
background: orange;
position: relative;
left: 20px;
}
.rootdiv .must-overflow {
border: dashed;
background: gray;
position: relative;
top: 20px;
left: 20px;
}
<div class="rootdiv">
<div class="not-overflow">
This must get chopped.
</div>
<div class="must-overflow">
This must overflow.
</div>
</div>
Solution
The thing is that overflow is relative to its children so it's either one or the other if you want to only have one parent division.
So this effect is unachivable with just one wrapper division. however when you add a third one its pretty simple. take a look at the example
.bigDiv {
background: red;
height: 50vh;
width: 50vw;
border: 5px solid black;
}
.bigDiv div div {
margin-top: 5vh;
width: 75vw;
border: 3px dashed black;
}
.divOne {
overflow: hidden;
}
.chop {
background: orange;
}
.overflow {
background: lightgray;
}
<div class="bigDiv">
<div class="divOne">
<div class="chop">
<p>this must get chopped</p>
</div>
</div>
<div class="divTwo">
<div class="overflow">
<p>this must overflow</p>
</div>
</div>
</div>
Answered By - Stanley
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.