CODEWITHSUNDEEP
htmlcssuser-interfacesass
Sunitha
Sunitha

Reputation: 261

One child div must overflow the other must not

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>

Upvotes: 3

Views: 1558

Answers (5)

Stanley
Stanley

Reputation: 2804

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

Upvotes: 1

Mateus Henrique
Mateus Henrique

Reputation: 16

You can create parent divs with width: 100% and overflow: hidden where you want to hidden. For example:

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

  .rootdiv .not-overflow {
    overflow: hidden;
    width: 100%;
  }

/* NOTE: just transformed the original "not-overflow" from the question to "styles" */ 
  .styles {
    border: dashed;
    background: orange;
    position: relative;
    left: 20px;
  }

/* end of changes */

  .rootdiv .must-overflow {
    border: dashed;
    background: gray;
    position: relative;
    top: 20px;
    left: 20px;
  }
<div class="rootdiv">
  <div class="not-overflow">
    <div class="styles">This must get chopped.</div>
  </div>
  <div class="must-overflow">This must overflow.</div>
</div>

Edit 1: You don't need to work with positions, but if you want, this solution won't bother you.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273021

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>

Upvotes: 0

ROOT
ROOT

Reputation: 11622

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>

Upvotes: 2

Will
Will

Reputation: 1193

Add white-space:nowrap in both divs, and overflow:hidden in the one you want chopped.

See jsfiddle here: https://jsfiddle.net/23cry94b/

Upvotes: 0

Related Questions