CODEWITHSUNDEEP
htmlcss
Lucfia
Lucfia

Reputation: 671

Overflow not for every element

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.

Upvotes: 2

Views: 1255

Answers (3)

Jean-Fran&#231;ois Beauchamp
Jean-Fran&#231;ois Beauchamp

Reputation: 5615

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.

Upvotes: 0

Juan Ferreras
Juan Ferreras

Reputation: 2861

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>

Upvotes: 4

Brandt Solovij
Brandt Solovij

Reputation: 2134

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>

Upvotes: 0

Related Questions