CODEWITHSUNDEEP
htmlcss
Ph Abd
Ph Abd

Reputation: 77

overflow auto on child div

I have a structure that is similar to modal windows and it looks like this: 

.pos_container { 
		display:block;
		vertical-align:top;
		width:70%;
		height:auto;
		margin:auto;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
		border:1px solid #ddd;
		position:relative;
		top:5%;
		max-height:90%;
		overflow:hidden;
	}
	.pos_header { 
		display:block;
		vertical-align:top;
		padding:15px 20px;
		background:#f7f7f7;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom:1px solid #ddd;
		
	}
	.pos_body { 
		display:block;
		vertical-align:top;
		padding:10px 20px;
		background:#fff;
		overflow-y:auto;
		height:100%;
	}
	<div class="pos_container">
		<div class="pos_header">
			// SOME CONTENT HERE, ALWAYS HAS FIXED HEIGHT
		</div>
		<div class="pos_body">
			// CONTENT IN HERE CAN BE VARIOUS HEIGHT, NEED AUTO-SCROLL 
		</div>
	</div>

I've searched the internet and always there is a rule to set the height of .pos_body to fixed height, but I need it to fit the visible part of .pos_container and in case content of .pos_body is overlapping the .pos_container then scroll will appear

Upvotes: 1

Views: 57

Answers (1)

Corentin PRUNE
Corentin PRUNE

Reputation: 388

try with a flex container 

.pos_container { 
		vertical-align:top;
		width:70%;
		height:auto;
		margin:auto;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
		border:1px solid #ddd;
		position:relative;
		top:5%;
		max-height:100px;
		overflow:hidden;
    display: flex;
    flex-direction: column;
	}
	.pos_header { 
		display:block;
		vertical-align:top;
		padding:15px 20px;
		background:#f7f7f7;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom:1px solid #ddd;
		
	}
	.pos_body { 
		vertical-align:top;
		padding:10px 20px;
		background:#fff;
		overflow-y:auto;
	}
<div class="pos_container">
		<div class="pos_header">
			// SOME CONTENT HERE, ALWAYS HAS FIXED HEIGHT
		</div>
		<div class="pos_body">
			// CONTENT IN HERE CAN BE VARIOUS HEIGHT, 
      fewfew few<br>
      fe<br>
      fwef<br>
      fwefeweNEED AUTO-SCROLL 
		</div>
	</div>

Upvotes: 1

Related Questions