CSS overflow-x: visible; et overflow-y: caché; provoquant un problème de barre de défilement

Supposons que vous ayez un certain style et le balisage:

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>

Lorsque vous affichez cela. Le <ul>a une barre de défilement en bas même si j'ai spécifié des valeurs visibles et cachées pour le débordement x / y.

(observé sur Chrome 11 et opéra (?))

Je suppose qu'il doit y avoir des spécifications W3C ou quelque chose qui disent que cela doit arriver, mais pour la vie de moi, je ne peux pas comprendre pourquoi.

JSFiddle

MISE À JOUR: - J'ai trouvé un moyen d'obtenir le même résultat en ajoutant un autre élément enroulé autour du ul. Vérifiez-le.

Après quelques recherches sérieuses, il semble que j'ai trouvé la réponse à ma question:

à partir de: http://www.brunildo.org/test/Overflowxy2.html

Dans Gecko, Safari, Opera, «visible» devient «auto» également lorsqu'il est combiné avec «caché» (en d'autres termes: «visible» devient «auto» lorsqu'il est combiné avec autre chose que «visible»). Gecko 1.8, Safari 3, Opera 9.5 sont assez cohérents entre eux.

aussi la spécification W3C dit:

Les valeurs calculées de 'overflow-x' et 'overflow-y' sont les mêmes que leurs valeurs spécifiées, sauf que certaines combinaisons avec 'visible' ne sont pas possibles: si l'une est spécifiée comme 'visible' et l'autre est 'scroll' ou 'auto', puis 'visible' est réglé sur 'auto'. La valeur calculée de 'overflow' est égale à la valeur calculée de 'overflow-x' si 'overflow-y' est la même; sinon c'est la paire de valeurs calculées de 'overflow-x' et 'overflow-y'.

Version courte:

Si vous utilisez visiblepour ou overflow-xou overflow-yet autre chose que visiblepour l'autre, la visiblevaleur est interprétée comme auto.

un autre hack pas cher, qui semble faire l'affaire:

style="padding-bottom: 250px; margin-bottom: -250px;"sur l'élément où le débordement vertical se coupe, avec 250autant de pixels que nécessaire pour votre liste déroulante, etc.

À l'origine, j'ai trouvé un moyen CSS de contourner cela lors de l'utilisation du plugin Cycle jQuery. Cycle utilise JavaScript pour définir ma diapositive.Ainsi overflow: hidden, lors de la définition de mes images, width: 100%les images sembleront coupées verticalement, je les ai donc forcées à être visibles avec !importantet à éviter d'afficher l'animation de la diapositive hors de la boîte que j'ai définie overflow: hiddensur la div du conteneur de la faire glisser. J'espère que ça marche pour toi.

MISE À JOUR - Nouvelle solution:

Problème d'origine -> http://jsfiddle.net/xMddf/1/ (Même si je l'utilise, overflow-y: visibleil devient "auto" et en fait "scroll".)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

La nouvelle solution -> http://jsfiddle.net/xMddf/2/ (J'ai trouvé une solution de contournement en utilisant un div wrapper à appliquer overflow-xet overflow-yà différents éléments DOM comme James Khoury l'a conseillé sur le problème de la combinaison visibleet hiddend'un seul élément DOM.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

J'ai rencontré ce problème en essayant de créer une barre latérale positionnée fixe avec du contenu à défilement vertical et des enfants positionnés absolus imbriqués à afficher en dehors des limites de la barre latérale .

Mon approche consistait à appliquer séparément:

• une overflow: visiblepropriété à l'élément de la barre latérale
• une overflow-y: autopropriété au wrapper intérieur de la barre latérale

Veuillez consulter l'exemple ci-dessous ou un codepen en ligne .

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

J'ai utilisé l' content+wrapperapproche ... mais j'ai fait quelque chose de différent de celui mentionné jusqu'à présent: je me suis assuré que les limites de mon wrapper ne s'alignaient PAS avec les limites du contenu dans la direction que je voulais être visible .

Remarque importante: Il est assez facile d'obtenir l' content+wrapper, same-boundsapproche du travail sur un navigateur ou d'une autre en fonction de diverses combinaisons de css de position, overflow-*, etc ... mais je ne peut utiliser cette approche pour les obtenir tout correct (Edge, Chrome, Safari,. ..).

Mais quand j'avais quelque chose comme:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... tous les navigateurs étaient satisfaits.

Il existe maintenant une nouvelle façon de résoudre ce problème - si vous supprimez la position: relative du conteneur qui doit avoir le débordement-y visible, vous pouvez avoir le débordement-y visible et le débordement-x caché, et vice versa (avoir le débordement- x visible et débordement-y caché, assurez-vous simplement que le conteneur avec la propriété visible n'est pas positionné relativement).

Voir cet article de CSS Tricks pour plus de détails - cela a fonctionné pour moi: https://css-tricks.com/popping-hidden-overflow/