在子div上溢出auto

Question

我有一个类似于模态窗口的结构，它看起来像这样：

.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>

我搜索了互联网，并且始终有一条规则将.pos_body的高度设置为固定高度，但是我需要它来适应.pos_container的可见部分，以防{}}的内容{1}}与.pos_body重叠，然后会显示滚动

Answer 1

尝试使用flex容器

＆＃13;

＆＃13;

.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;
	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;