One child div must overflow the other must not

user_5817082 0
Viewed 147

enter image description here

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>

sass user-interface css html
4 Answers

I added overflow for the main <div> and used position:absolute for the .must-overflow that should overflow:

.rootdiv {
  width: 300px;
  height: 300px;
  background: red;
  border: solid;
  overflow: hidden; 
}

.rootdiv .not-overflow {
  border: dashed;
  background: orange;
  position: relative;
  left: 20px;
}

.rootdiv .must-overflow {
  border: dashed;
  background: gray;
  position: absolute ;
  top: 50px;
  left: 30px;
  width: 400px;
}
<div class="rootdiv">
    <div class="not-overflow">
      This must get chopped.
    </div>
    <div class="must-overflow">
      This must overflow.
    </div>
</div>

user_8963580

this is a great question allthough it breaks some question asking rules:

https://stackoverflow.com/help/how-to-ask

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.

enter image description here

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>

and the result enter image description here

user_37125310
user_65128570

Use a pseudo element with a big box-sahdow and can control the z-index then you can easily hide/unhide the overflow you want:

.rootdiv {
  width: 300px;
  height: 300px;
  padding:3px;
  background: red;
  position:relative;
  z-index:0;
}
.rootdiv:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border: solid;
  box-shadow: 0 0 0 calc(100vw + 100vh) #fff;
  z-index:0;
}

.rootdiv > div {
  position: relative;
  left: 20px;
  margin:20px 0 0 20px;
  border: dashed;
}

.rootdiv .not-overflow {
  background: orange;
  z-index:-1; /* will not overflow */
}

.rootdiv .must-overflow {
  background: gray;
  z-index:1; /* will overflow */
}
<div class="rootdiv">
    <div class="not-overflow">
      This must get chopped.
    </div>
    <div class="must-overflow">
      This must overflow.
    </div>
    <div class="not-overflow">
      This must get chopped.
    </div>
    <div class="must-overflow">
      This must overflow.
    </div>
</div>

user_86203330
Related