Image 1 Image 2

I have this element on my site that is supposed to scroll horizontally(overflow-x: scroll) on smaller screens, the issue is, the properties I applied to its children only appear on the parts the were visible before scrolling, in the example images you can see the background color is not the same throughout the elements, also it’s not possible to interact with the area outside the selected part. I’ll add this example to make my problem clearer.

&__content {
        margin-top: 25px;
        width: 100%;
        background-color: white;    
        border-radius: 5px;
        box-shadow: 4px 4px 5px rgb(214, 214, 214);
        overflow-x: scroll;

        &__header {
            @include flex(1, 0);
            justify-content: start;

            p {
                @include flex(0, 0);
                width: 100%;
                text-align: center;
                height: 100%;
                height: 50px;
                padding-right: 10px;
                border-bottom: 1px solid rgb(202, 202, 202);

                &:nth-child(1) {
                    width: 60px;
                    min-width: 60px
                }
                &:nth-child(2) {
                    width: 100%;
                    min-width: 200px
                }
                &:nth-child(3) {
                    width: 100%;
                    min-width: 350px;
                }
                &:nth-child(4) {
                    width: 100%;
                    min-width: 200px
                }
                &:nth-child(5) {
                    width: 100%;
                    min-width: 150px
                }
                &:nth-child(6) {
                    width: 60px;
                    min-width: 60px
                }
                &:nth-child(7) {
                    width: 100%;
                    min-width: 200px;
                }
                &:nth-child(8) {
                    width: 200px;
                    min-width: 200px;
                }
            }
        }

        &__pedido, &__pedido-finalizado {
            @include flex(0, 0);
            justify-content: start;
            padding: 10px 0;
            transition: all ease-in-out 125ms;

            &:hover {
                cursor: pointer;
                background-color: rgb(247, 247, 247)
            }

            p {
                @include flex(0, 0);
                text-wrap:nowrap;
                overflow-x: hidden;
                padding-right: 10px;
                pointer-events: none;
                user-select: none;

                &:nth-child(1) {
                    width: 60px;
                    min-width: 60px
                }
                &:nth-child(2) {
                    width: 100%;
                    min-width: 200px
                }
                &:nth-child(3) {
                    width: 100%;
                    min-width: 350px;
                }
                &:nth-child(4) {
                    width: 100%;
                    min-width: 200px
                }
                &:nth-child(5) {
                    width: 100%;
                    min-width: 150px
                }
                &:nth-child(6) {
                    width: 60px;
                    min-width: 60px
                }
                &:nth-child(7) {
                    width: 100%;
                    min-width: 200px;
                }
                &:nth-child(8) {
                    width: 200px;
                    min-width: 200px;
                }
            }
        }

        &__pedido-finalizado {
            filter: opacity(25%);

            &:hover {
                background-color: rgb(221, 221, 221)
            }
        }

    function RenderPedidos() {
        return(
            pedidos.map((pedido, index) => (
                <div key={index} id={index} name="pedido" className={(pedido.finalizado) ? "pedidos-container__content__pedido-finalizado" : "pedidos-container__content__pedido"} onClick={event => handleClickPedido(event)}>
                    <p>{(pedido.id > 9999) ? String(pedido.id).slice(0, 4) + '...' : pedido.id}</p>
                    <p>{(pedido.nome.length > 20) ? pedido.nome.slice(0 ,21) + '...' : pedido.nome}</p>
                    <p>{(pedido.descricao.length > 35) ? pedido.descricao.slice(0 ,36) + '...' : pedido.descricao}</p>
                    <p>{(pedido.material.length > 20) ? pedido.material.slice(0 ,21) + '...' : pedido.material}</p>
                    <p>{"R$ " + pedido.valor.toFixed(2)}</p>
                    <p>{pedido.quantidade}</p>
                    <p>{(pedido.cliente.length > 20) ? pedido.cliente.slice(0 ,21) + '...' : pedido.cliente}</p>
                    <p>{formatDatetime(pedido.prazo, 0)}</p>
                </div>
            ))
        )
    }
...
 <div className="pedidos-container__content">
                <div className="pedidos-container__content__header">
                    <p>ID</p>
                    <p>Nome</p>
                    <p>Descrição</p>
                    <p>Material</p>
                    <p>Valor</p>
                    <p>Qtd.</p>
                    <p>Cliente</p>
                    <p>Prazo</p>
                </div>
                <RenderPedidos/>
            </div>

I tried to tinker with some properties but I had no meaningful outcome.