stack stack - 3 months ago 18
CSS Question

Why when I set overflow property to hidden, then a pseudo element goes away?

Here is my code:



.user_inbox{
position:absolute;
background-color: #fff;
border-radius:2px;
-o-border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-ms-border-radius:2px;
box-shadow: 0px 0px 6px #ccc;
-o-box-shadow: 0px 0px 6px #ccc;
-moz-box-shadow: 0px 0px 6px #ccc;
-webkit-box-shadow: 0px 0px 6px #ccc;
-ms-box-shadow: 0px 0px 6px #ccc;
width: 310px;
direction:ltr;
left:53px;
top:63px;
border:1px solid #CCC;
z-index:5000;
height:100%;
max-height:55%;
min-height:180px;
right: 53px;
top: 65px;
/* overflow:hidden; */
}
.user_inbox:after{
background-color: #fff;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
-o-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
-moz-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
-webkit-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
-ms-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
content: "\00a0";
display: block;
height: 12px;
width: 12px;
margin-left:18px;
position:absolute;
top:-5px;
transform:rotate(135deg);
-moz-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-o-transform:rotate(135deg);
background-color: #F7F7F7;
right: 18px;
}

.title{
background-color: #F7F7F7;
display:block;
width; 100%;
height: 20px;
text-align: center;
padding: 5px;
}

<div class="user_inbox">
<span class="title">there is a title</span>
</div>





Now please remove that comment which is around this line:
overflow:hidden;
(I mean please make that line uncomment) .. then suddenly that up-arrow will be vanished.

Ok well, I need both that up-arrow and this property
overflow:hidden;
. How can I handle that?

Answer

overflow:hidden is game-over for a child element trying to pop out of it's parent overflow boundary.
Instead create an inner container that will overflow (hidden)

.overflow{
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
  background: #cf5;
}

.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  height:100%;
  max-height:55%;
  min-height:180px;	
  right: 53px;
  top: 65px;
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, 0.4 );
  content: "\00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}

.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}
<div class="user_inbox">
  <div class="overflow">
    <span class="title">there is a title</span>
  </div>
</div>

or on the "bottom" (underneath the title);

.overflow{
  position: relative;
  overflow:hidden;
  width: inherit;
  background: #cf5;
  max-height:55%;
  min-height:180px;	
}

.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  /*height:100%;
  max-height:55%;
  min-height:180px;	*/
  right: 53px;
  top: 65px;
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, 0.4 );
  content: "\00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}

.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}
<div class="user_inbox">
  <span class="title">there is a title</span>
  <div class="overflow"></div>
</div>