Como restringir uma div dentro de um componente?

2 respostas
react
Raissa_De_Oliveira

Bom dia,
Eu tenho os seguintes componentes em React, um header e um componente gradient, um componente que é “roteado” (em azul) e um footer (figura 1).
Neste componente roteado vários outros componentes sao mostrados, e em um deles eu tenho um componente (em vermelho) que se chama parent (tem vários outros child components dentro dele).

Eu gostaria de entender o comportamento do componente vermelho em relacao ao azul. Ele se restringe nos lados e na parte superior mas na parte inferior ele se extende para além do azul e até para além do footer.

Eu gostaria que o componente vermelho ficasse restrito ao azul (como na figura 2), e nao gostaria de ter uma altura hard-coded naturalmente (gostaria que o componente se adaptasse ao tamanho do componente azul)

Qualquer ajuda eu agradeco!


2 Respostas

rodriguesabner

olha, me baseando no olhometro vc pode dar um overflow: auto no componente pai, que seria o ‘routed’. Aí ele vai conseguir fazer o scroll de tudo que ta dentro dele e vai ‘enfiar’ as coisas na visão apenas dele, então se o vermelho ultrapassar o tamanho do routed, ele vai forçar o scroll da parada.

mas pra te ajudar de vdd o ideal seria vc passar o codigo

rodriguesabner

o código q vc passou ainda é bem ‘raso’ em comparação ao que vc quer… Grava um vídeo ou tira um print de como está por favor?

se puder mostrar o código do routed component também, que acredito q vc esteja usando o react router dom, se estiver usando da pra estilizar ele

Criado 21 de junho de 2023
Ultima resposta 26 de jun. de 2023
Respostas 2
Participantes 2