Pourquoi overflow-y: caché des listes HTML rend la puce/numéro invisible?

Question

J'ai défini la propriété CSS <li> sur hidden, puis sa puce/numéro a été supprimé. Pourquoi? Quelle est leur relation? (? Comment puis-je le corriger)

est ici un simple échantillon (En ce qui concerne @Paulie_D answer, j'ai ajouté overflow-x:visible):

li:first-child { 
 
    overflow-y:hidden; 
 
    overflow-x:visible; 
 
}

<ul> 
 
    <li>Unordered list - Item 1</li> 
 
    <li>Unordered list - Item 2</li> 
 
</ul> 
 
<ol> 
 
    <li>Ordered list - Item 1</li> 
 
    <li>Ordered list - Item 2</li> 
 
</ol>

je l'ai couru sur Firefox et v49.x Chrome v54.x.

---

EDIT: En raison de quelques réponses, j'explique:

Puces/numéros sont en dehors des limites du terrain x, pas y-limites!

Answer 1

De ma lecture, lorsque vous définissez overflow-y:hidden la overflow-xcalculée valeur est définie sur auto qui fait partie de la CSS Spec .

Valeur calculée: comme spécifié, sauf si le calcul visible est automatique si l'un des paramètres overflow-x ou overflow-y n'est pas visible.

... et overflow:auto

Cette valeur indique que le contenu de la boîte est clipsé à la boîte de remplissage.

..et puisque le marqueur est en dehors du li, il est écrêté et masqué.

Answer 2

Les puces sont en dehors de par défaut, alors overflow-y:hidden; les cache. Vous pouvez utiliser list-style-position: inside; pour remplacer la valeur outside par défaut.

Je le sais; mais ils sont en dehors des frontières x, pas de frontières y!

Vérifiez cette image:

La boîte bleue est la zone de délimitation de l'élément de liste. L'espace avant les éléments de la liste est le remplissage par défaut des éléments parents ul et ol. Donc, les balles sont en dehors de des éléments de la liste.

Answer 3

cause de la balle dans la liste à puces ou des numéros dans la liste ordonnée sont quelque chose de plus que la zone de délimitation