<div class="box wrapper">
<div class="box child">
<p>max-height: 50%;</p>
<p>Цей блок ніколи не буде вищим за половину висоти батьківського елементу.</p>
</div>
<p>Не забуваємо, що на висоту також впливають поля та межі!</p>
</div>
.box {
border: 2px solid #666;
padding: 12px;
font-family: monospace;
font-size: 18px;
}
.wrapper {
height: 250px;
}
.child {
max-height: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.