css - 显示 : table not take the dynamic height take their children height

Question

我有 3 个 div 元素，一个是父元素，另外两个是子元素:

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

我为#table div 提供了元素高度#first 的高度，而#second 的高度大于其父级。但我希望内部 div 仅在其父高度和其余高度被隐藏时才可见。但是 parent 正在考虑 child 的高度。

Answer 1

Overflow:hidden 仅适用于 block 级元素，因此不适用于 display: table。要解决此问题，您可以在内部元素上使用 position: absolute 并在父 div 上使用 position: relative。

希望这对您有所帮助!

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