how to make div of fixed height inside div - html

Question

<style type="text/css">
#displayHeader {
img {
width: 100%;
max-width: 100%;
max-height: 100%;
}
.header-img-inner {
max-height:100%;
}
}
</style>
<div id="displayHeader" style="height: 83.03px;">
<div class="header-inner">
<div class="row">
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>TEST</p>
</div>
</div>
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
</div>
</div>
<div id="headerCol2" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>tt</p>
</div>
</div>
</div>
</div>
</div>
<div id="displayContent" style="height: 264.8px;">
<div class="inner">
</div>
<div>
</div>
<div>
</div>
<div>
Image and text go out of the div block, why is this happening?
No float left, right used. It's not working with position:relative for parent and position absolute for child, but still not work well.
I only set maximum height for image when I set in on the header-img-inner

Answer 1

Why not use position: inherit; so as to make the image and whatever you want inside the div to inherit the position. This might help, give it a try.

Answer 2

Do you want something like this?
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
}
.block:before {
content: '\200B';
/* content: '';
margin-left: -0.25em; */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display:inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some Text</h1>
<img src="Untitled-2.jpg" height="150px">
</div>
</div>
Please check this link:-https://css-tricks.com/centering-in-the-unknown/