display : table 不取动态高度取其 children 高度

Question

我有 3 个 div 元素，一个是 parent，另外两个是 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;
        }

我给#table div 元素高度#first，而#second 的高度大于它的parent。但我希望内部 div 只有在它们的 parent 高度和其余部分被隐藏时才可见。但是 parent 占据了其 children 的高度。

Answer 1

Overflow:hidden 仅适用于块级元素，因此不适用于 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>

display : table 不取动态高度取其 children 高度

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

css

height

display