display : table not take the dynamic height take their children height - css

Question

I have 3 div elements, one is the parent and other two are children:
<div id="table">
<div id="first"> dinesh </div>
<div id="second"> pathak </div>
</div>
and their css are:
#table {
display: table;
width: 200px;
height: 200px;
margin: 0;
border: 5px solid blue;
padding: 5px;
}
#first {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 200px;
overflow: hidden;
}
#second {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 200px;
overflow: hidden;
}
I am giving the #table div the height of element height #first, and #second has the height that is greater than its parent. But I want that the inner div to be visible only if their parent height and the rest are hidden. But the parent is taking the height of its children.

Answer 1

Overflow:hidden only works on block-level elements, hence it not working with display: table. To fix this, you can use position: absolute on your inner elements and position: relative on the parent div.
Hope this helps!
#table {
display: table;
width: 200px;
height: 100px;
margin: 0;
border: 5px solid blue;
padding: 5px;
position: relative;
overflow: hidden;
}
#first {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 300px;
position: absolute;
top: 0;
left: 15%;
}
#second {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 300px;
position: absolute;
top: 0;
left: 55%;
}
<div id="table">
<div id="first"> dinesh </div>
<div id="second"> pathak </div>
</div>