CSS-Anzeige: Tabellenzelle, eingestellte Höhe und Überlauf: versteckt, funktioniert nicht?

Question

Ich möchte ein Element abschneiden, wenn der Inhalt seiner Kinder zu groß ist, aber es funktioniert nicht in display:table-cell Elemente. Hier ist ein Beispiel auf JsFiddle:

JSFiddle

.table{ 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    height:200px; 
 
} 
 
.cell{ 
 
     display: table-cell; 
 
     vertical-align: top; 
 
     position: relative; 
 
     height:200px; 
 
     overflow:hidden; 
 
} 
 
.container{ 
 
    height:100%; 
 
    background-color:red; 
 
} 
 
.container img{ 
 
    display:block; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
     <div class="container"> 
 
      <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" /> 
 
      <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" /> 
 
      <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" /> 
 
     </div> 
 
    </div>

jemand bitte sagen, wo bin ich falsch? Vielen Dank!

Answer 1

, damit es funktioniert, müssen wir Position verwenden: relative für Tisch und position: absolute für Tabellenzelle Artikel. Auch in Ihrem Code habe ich die Höhe des Containers entfernt: 100%, was nutzlos ist. Hier ist die Vorschau und fiddle. Tisch cell` Behälter:

.table{ 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    height:200px; 
 
    position: relative; 
 
} 
 
.cell{ 
 
     display: table-cell; 
 
     vertical-align: top; 
 
     position: absolute; 
 
     height:200px; 
 
     width: 100%; 
 
     overflow-y:scroll; 
 
     overflow-x: hidden; 
 
} 
 
.container{ 
 
    background-color:red; 
 
} 
 
.container img{ 
 
    display:block; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
     <div class="container"> 
 
      <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" /> 
 
      <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" /> 
 
      <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" /> 
 
     </div> 
 
    </div>

Answer 2

ändern Sie Ihre CSS-Display-Typ.

.table{ 
    display:block; 
    width: 100%; 
    height:200px; 
} 
.cell{ 
    display:block; 
    vertical-align: top; 
    position: relative; 
    height:200px; 
    overflow:hidden; 
} 
.container{ 
    height:100%; 
    background-color:red; 
} 
.container img{ 
    display:block; 
} 

fiddle here