Need help with h1 text overlapping the container

I Built This
1

Hi I need help with my random quote machine. I used flexbox for this project.
In normal cases, it is fine. Desktop and mobile. But when the viewport height shrinks, the text is eaten by the container. How to fix this little bug?? I’m thinking of:

  1. Set overflow - did the overflow in css, nothing happened.

here’s the codepen and image:
https://codepen.io/jcunanan05/pen/yKaoRm

random quote

2

Mh…is this solved? i tried to resize the browser and everything looks fine - the scrollbar reduce your width and the content replaces itself, besides that I’m not seeing anything weird :confused:

3

Hi layer, I didn’t solve it yet! But yeah it works on normal situations, but in my screenshot, the text goes up the container :frowning:

4

I would also add in css:

@media (max-width:480px){
  .quote{
    font-size: 1.5em;
  }
}

to lower the font size on mobiles but still keep the text readable.