display: table ne pas prendre la hauteur dynamique prennent leurs enfants hauteur

Question

J'ai 3 éléments div, on est le parent et deux autres sont des enfants:

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

Je donne la #table div la hauteur de la hauteur de l'élément #first, et #second a la hauteur qui est plus grande que son parent. Mais je veux que la div interne soit visible seulement si la hauteur de leur parent et le reste sont cachés. Mais le parent prend la taille de ses enfants. Ne fonctionne que sur les éléments de niveau bloc, par conséquent, il ne fonctionne pas avec display: table

Answer 1

Overflow:hidden Pour résoudre ce problème, vous pouvez utiliser position: absolute sur vos éléments internes et position: relative sur la div parente.

Espérons que cela aide!

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