Überlauf auf der Y-Achse zulassen, während Überlauf auf der X-Achse verborgen ist

Question

Ich versuche, einen Überlauf auf der Y-Achse zuzulassen, während Überlauf auf der X-Achse versteckt wird. Man könnte erwarten, dass diese Eigenschaften hinzufügen:

.overflow { 
    overflow-x: hidden; 
    overflow-y: visible; 
} 

auf ein Block-Element würde genügen, aber aufgrund einiger CSS-Implementierung Macken als here dokumentiert, dies nicht wirklich funktionieren. Was passiert, ist, dass der berechnete Wert von Überlauf-y automatisch wird, während Überlauf-x verborgen bleibt.

Gibt es eine andere Möglichkeit, das gewünschte Verhalten zu erreichen?

Nur für ein bisschen mehr Detail, habe ich eine horizontale Liste von Elementen, die ich benutzerdefinierte Schaltflächen verwenden, um durch zu blättern. Die Breite des enthaltenden Elements der Liste ist viel niedriger als die Breite der Liste. Ich möchte nicht, dass eine Bildlaufleiste angezeigt wird, da ich meine eigenen benutzerdefinierten Schaltflächen verwende, um durch die Liste zu navigieren, und daher muss ich overflow-x ausblenden. Bei Hover möchte ich eine Transformation anwenden, um die Größe der Elemente zu vergrößern, aber ich möchte, dass die Elemente außerhalb des oberen und unteren Bereichs des enthaltenden Elements überlaufen können, daher muss overflow-y sichtbar sein.

Answer 1

Wenn es Ihnen nichts ausmacht, ein zusätzliches Markup hinzuzufügen, scheint es eine einfache Lösung zu geben.

Sie müssen nur zwei div, eine für jeden Überlauf verwenden.

Zum Beispiel:

<div class="outer"> 
    <div class="middle"> 
     <!-- your content here --> 
    </div> 
</div> 

und die folgenden Markup:

.outer { 
    overflow-y: visible; 
} 

.middle{ 
    overflow-x: hidden; 
} 

scheint die Arbeit zu tun.

Ein kleines Beispiel here.