CSS overflow-x: visible; und overflow-y: hidden; verursachen Probleme mit der Bildlaufleiste

Question

Nehmen wir an, Sie haben einen Stil und das Markup:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Wenn Sie dies sehen. Die <ul> hat eine Bildlaufleiste am unteren Rand, obwohl ich sichtbare und verborgene Werte für Überlauf x/y angegeben habe.

(beobachtet auf Chrome 11 und Opera (?))

Ich vermute, dass es eine w3c-Spezifikation oder etwas anderes gibt, das dies vorschreibt, aber ich kann beim besten Willen nicht herausfinden, warum.

JSFiddle

UPDATE:- Ich habe eine Möglichkeit gefunden, dasselbe Ergebnis zu erzielen, indem ich ein weiteres Element um das ul . Sehen Sie sich das an.

Answer 1

Ich stand vor dem gleichen Problem, die folgende Lösung funktionierte (Stile werden auf den übergeordneten Block angewendet)

overflow-y: visible;
overflow-x: clip;

Answer 2

Es gibt jetzt einen neuen Weg, dieses Problem zu lösen - wenn Sie die position: relative aus dem Container, in dem overflow-y sichtbar sein muss, können Sie overflow-y sichtbar und overflow-x ausgeblendet haben und umgekehrt (overflow-x sichtbar und overflow-y ausgeblendet haben, stellen Sie nur sicher, dass der Container mit der Eigenschaft visible nicht relativ positioniert ist).

In diesem Beitrag von CSS Tricks finden Sie weitere Einzelheiten - bei mir hat es funktioniert: https://css-tricks.com/popping-hidden-overflow/

Answer 3

Ich habe den Ansatz Inhalt + Wrapper verwendet... sondern Ich habe etwas anderes gemacht als bisher erwähnt: Ich habe dafür gesorgt, dass die Grenzen meines Wrappers NICHT mit den Grenzen des Inhalts übereinstimmen in die Richtung, in der ich sichtbar sein wollte .

Wichtiger HINWEIS: Es war einfach genug, den Ansatz "Inhalt + Wrapper, gleiche Grenzen" auf dem einen oder anderen Browser in Abhängigkeit von verschiedenen CSS-Kombinationen zu realisieren position , overflow-* usw., aber ich konnte sie mit diesem Ansatz nie erreichen. alle korrekt (Edge, Chrome, Safari usw.).

Aber wenn ich etwas hatte wie:

#hack_wrapper {
    position:absolute; 
    width:100%; 
    height:100%; 
    overflow-x:hidden;
}

#content_wrapper {
    position:absolute; 
    width:100%; 
    height:15%; 
    overflow:visible;
}

<!-- #hack_wrapper div created solely for this purpose --> 
<div id="hack_wrapper">
    <div id="content_wrapper">         
          ... this is an example of some content with far too much horizontal content... like, way, way, way too much content.
    </div>
</div>

... alle Browser waren zufrieden.

Answer 4

Ein kleiner "Hack", der sehr gut funktioniert, wenn nur die erste Zeile sichtbar sein soll (aber trotzdem Überlauf benötigt wird):

Stellen Sie den Abstand sehr hoch ein, so dass Sie sicher sind, dass die zweite Reihe aus dem Bildschirm herausgeschoben wird - z. B:

gap: 10000rem;

Es ist wirklich hacky, aber funktioniert gut für so etwas wie ein Desktop-Nav mit Menüs, die überlaufen müssen ...