How do I make the React application scroll down if the content doesn’t fit on the screen?

Question

I thought it was natural that when the contents of HTML did not fit on the screen, the browser would automatically allow scrolling for easy viewing. In the following case, for example, I have the Banner that is rendered within AutoAtendimento:

function Banner({children, titulo, className}) {
    return (
            <div className={className}>
                        <div className="Icone">
                            {children}
                        </div>

                        <div className="Conteudo">
                            {titulo}
                        </div>
            </div>
    )
};

function AutoAtendimento() {
    return (
        <div className="Geral">
            <a href="/">
                <Banner className="Cliente" titulo="Sou Cliente"></Banner>
            </a>

            <a href="/">
                <Banner className="Associado" titulo="Sou Associado"></Banner>
            </a>
        </div>
    )
}

Just, I downloaded my application by mobile browser and the Banners did not fit on the screen, because it is a display: flex; they were arranged in column and then break the vertical limit of the screen. And I can’t scroll to see them:

How to make the application resize and allow scrolling? Following the CSS of my Banner and AutoAtendimento respectively:

Banner:
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

AutoAtendimento:
.Geral {
    display: flex;
    flex: 1;
    flex-wrap: wrap;

    margin: 30px;

    align-items: center;
    justify-content: center;
}

Answer 1

In the CSS of the component Banner, you are setting the property overflow as hidden for all the elements of your page, not just for the component elements, and this is preventing scrolling. Try to place a more specific selector for the component elements.

function Banner({children, titulo, className}) {
    return (
            /* Adicionamos uma classe a mais para diferenciar o banner de outras divs */
            <div className={`banner ${className}`}>
                        <div className="Icone">
                            {children}
                        </div>

                        <div className="Conteudo">
                            {titulo}
                        </div>
            </div>
    )
}

div.banner {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}