Overflow not for every element

Question

is there a way to make overflow:hidden which wouldn't be applied for every child?

Little example:

<div class="parent" style="overflow:hidden; position: relative;">
   ...
   <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
   <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
   ... 
</div>

I need to have 1 element, which will be visible even if it is overflowing.

I would start by asking, why do you need the overflow in this case on the parent? — Dejan.S
– Dejan.S, Commented Aug 15, 2016 at 13:43
Are you wanting the children to overflow their parent? It's unclear exactly what you're asking. — TylerH
– TylerH, Commented Aug 15, 2016 at 13:49

Juan Ferreras · Accepted Answer · 2016-08-15 13:52:37Z

4

If your visible element can be position: absolute it will ignore the overflow: hidden of its parent. Here's a snippet example.

Please notice your parent should be contained inside another div with position: relative to properly work.

.visible{
  position: absolute;
}
.parent{
  overflow: hidden;
}
.relative{
  position: relative;
}

/* presentational styles */
.parent{
  border: 1px solid blue;
}
.hidden{
  background: yellow;
}
.visible{
  background: red;
}
.parent,
.hidden,
.visible{
  padding: 2rem;
}

<div class="relative">
  <div class="parent">
     <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
     <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
  </div>
</div>

answered Aug 15, 2016 at 13:52

Juan Ferreras

2,8712 gold badges15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2016-08-15 13:48:26Z

0

CSS:

.hidden-flow {
    overflow: hidden;
}

And the HTML:

<div class="parent hidden-flow" style=" position: relative;">
   ...
   <div class="hidden hidden-flow" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
   <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
   ... 
</div>

edited Aug 15, 2016 at 13:48

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Aug 15, 2016 at 13:44

Brandt Solovij

2,13413 silver badges24 bronze badges

Comments

Jean-François Beauchamp · Accepted Answer · 2016-08-15 14:03:27Z

I believe it will be difficult without adding more elements. The only way I can think of is by adding another container with the same position as the parent. But this will break you elements flow, unless you use absolute positioning. It would be something along these lines:

<style>
.parent {
  position: relative;
  width: 50px;
  border: 1px solid blue;
}

.subparent{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow:hidden; 
}

.parent > div {
  position: absolute;
}

.visible {
}

.hidden {

}
</style>

<div class="parent">
   ...
   <div class="subparent">
     <div class="hidden" style="top: -50px"> AAAAAAAAAAAAAAAAAAA </div> <!-- overflowed and hidden -->

   </div>

   <div class="visible" style="bottom: -50px"> BBBBBBBBBBBBBBBB </div> <!-- overflowed and visible -->
   ... 
</div>

The element that should be hidden if they overflow should be in the div with class subparent.

Collectives™ on Stack Overflow

Overflow not for every element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related