Überlauf versteckt versteckt alle Inhalte

Question

Ich habe this pen, die ein Schnipsel eines größeren Projekts ist, wo ich versuche, ein Div zu verstecken, wie es nach links umgewandelt wird. Die Elemente, die den übergelaufenen Inhalt verbergen müssen, sind .fixed-strip und das zu verbergende Element ist .strip. Sobald ich overflow: hidden; oder overflow-x: hidden; zu .fixed-strip hinzufüge, verbirgt es den gesamten Inhalt, nicht nur den umgewandelten Inhalt.

.fixed-strip{ 
    max-width: 20rem; 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

.strip { 
    display: block; 
    background-color: fade_out(rgba(122, 116, 97, 1),0.6); 
    left: 0; 
    top: 1rem; 
    width:300px; 
    height:80px; 
    position: absolute; 
    transition: transform .5s ease-in-out; 
    z-index: 1000; 
} 

Der ganze Kopf hat aus anderen Gründen in einen position:fixed; Behälter sein. Könnte das das Problem verursachen?

Answer 1

Ich habe versucht, Ihren Stift, und wenn ich verstanden habe, was Ihr Problem ist, versuchen Sie, eine angemessene Höhe zu Fixed-Strip.

Answer 2

Fügen Sie einfach height: 100%;-.fixed-strip:

.fixed-strip { 
    max-width: 20rem; 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
} 

Es ist, weil .fixed-strip keine Höhe überhaupt haben und es nur den Überlauf standardmäßig angezeigt wird. Es füllte nicht die Höhe, weil das Kind position: absolute; war, deshalb ist einmal overflow: hidden alles ausgeblendet, da es keine Höhe für die anzuzeigenden Einzelteile hat.

Hoffe, dass Hilfe.