property 'overflow-y' from css don't show the expected behaviour -


in project, create follow div section simulate popup box:

<div id="box">     <div id="header"> <span id="title"></span> <span id="button">x</span> </div>     <div id="text"> </div> </div> 

where append content of several pages on it, content bigger size of box. in current status, content rendered outside box, despite using value 'scroll' property overflow-x, follow:

#box {     border-style: solid;     box-shadow: 2px 2px 2px black;     height: 400px;     max-width: 90%;     max-height: 90%; }  #button {     background-color: #99ccff;     min-width: 32px;     max-width: 5%;     min-height: 32px;     max-height: 100%;     position:absolute;     right:0px;     text-align:center;     padding-left:10px;     padding-right:10px; }  #header {     background-color: #66b2ff;  }  #title {     text-decoration-color: #ffffff;     font: 28px arial; }  #text {     background-color: #e0e0e0;     text-decoration-color: #000000;     font: 24px sans-serif;     overflow-y: scroll;     min-height: 480px }  .ui-resizable-handle {     width: 5px;     height: 5px;     background-color: red; } 

what missing here?

if im not mistaken,

overflow-x: scroll; overflow-y: scroll; 

are css 3 properties , if using old browser wont work.

your code works fine in chrome33, here fiddle


Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -