Why overflow-y:hidden of HTML-lists makes bullet/number to be invisible?

Question

I set <li>'s CSS property overflow-y to hidden, then its bullet/number was removed. Why? What is their relation? (How can I correct it?)

Here is a simple sample (With regard to @Paulie_D answer, I added 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>

I ran it on Firefox v49.x and Chrome v54.x.

---

EDIT: Due to some answers, I explain:

Bullets/Numbers are outside of x-bounds, no y-bounds!

Answer 1

The bullets are outside of list elements by default so overflow-y:hidden; hides them. You can use list-style-position: inside; to override the default outside value.

I know that; but they are outside of x-boundaries, no y-boundaries!

Check this image:

The blue box is the bounding box of the list element. The space before the list elements is the default padding of the parent ul and ol elements. So the bullets are outside of the list elements.