css - Handling overflow on fixed height, scrollable containers -


i'm trying annotate specific funtionality in app, , annotations appear side of column of content. column fixed height custom scrollers, need overflow y auto or scroll - , overflow-x visible, annotation visible.

i know isn't possible setting auto/visible on same element, have seen solutions on column set overflow-y auto, , wrapper set overflow visible - can't working.

i have jsbin set current implementation - https://jsbin.com/woduciv/edit?html,css,output

essentially:

.wrapper {   position: absolute;   height: 100%;   width: 100%; } .column {   position: fixed;   left: 0;   height: 100%;   width: 25%;   overflow: visible; } .column__content {   position: static;   overflow-y: scroll;   height: 100%;   width: 100%; } 

does know solution have x axis visibly, , y scroll enabled?

thank :)

try this:

body {    height: 100%;    margin: 0;    font-family: 'unica one', sans-serif;    background: #fff;  }  .custom-panel {    border-radius: 0;    height: 300px;    overflow: scroll;    padding: 15px;    width: 400px;  }  .custom-panel p {    min-width: 500px;    width: 100%;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">  <div class="container">  		<div class="col-sm-6">  			<div class="panel custom-panel">  				<p> "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>  			</div>  		</div>  </div>

hope you!!


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -