Como manter proporcional o tamanho da DIV ao rolar o Scroll?

[andretresso]

Galera, tudo bom?

Estou aprendendo a programar, estou utilizando Node.js, React e Typescrypt para desenvolver muita parte de front-end, e também algumas coisas de back-end. Estou bem no inicio do aprendizado, então peço que relevem o nível da minha dúvida (que pode ser simples) e me ajudem com feedbacks e dicas se for possível.

Preciso fazer com que minhas Divs se mantenham proporcional a minha Main Header, o que ocorre é que as demais divs respondem de forma proporcional, e aumentam conforme o zoom é diminuido, porém as divs centrais não respeitam isso, e são jogadas para o lado esquerdo da tela.

Como está:

Exemplo de como eu gostaria que ficasse:

CSS:

export const ContainerCustomer = styled.div
background-color: ${props => props.theme.colors.secondary};
border-radius: 5px;
width: 330px;
height: 300px;
color: white;
padding: 12px 10px;
margin: 10px 5px 0 10px;
display: inline-block;
;

[NegriHenrique]

como está feito seu html?

[andretresso]

`import React from "react";

import { Container,
Content,
CustomerContainer,

} from './styles';

import ContentHeader from "../../components/ContentHeader";
import SelectInput from "../../components/SelectInput";
import HistoryFinanceCard from "../../components/HistoryFinanceCard";
import ContentCustomer from "../../components/CardCustomer"
import ContentSeachCustomer from "../../components/SearchCustomer"

const CRM: React.FC = () => {

const options = [
    {value: 'Hoje', label: 'Hoje'},
    {value: 'Ontem', label: 'Ontem'},
    {value: 'Últimos 7 Dias', label: 'Últimos 7 Dias'},
    {value: 'Últimos 30 Dias', label: 'Últimos 30 Dias'},
    {value: 'Mês Passado', label: 'Mês Passado'},
    {value: 'Data Especifica', label: 'Data Especifica'},
]


return (

    <Container>
        <ContentHeader title="CRM" lineColor="#1FAF56">
            
        </ContentHeader>

    <Content>
        <HistoryFinanceCard
            cardColor="#222D33"
            tagColor="#F44" 
            title="Menu > CRM > Relatório de Clientes"
        />
    </Content>

      <div>
            <ContentSeachCustomer
                    divColor="#222D33"
                    titleSearchCustomer="Pesquisar"                   
            />
            <SelectInput options={options} />

     </div>

    <CustomerContainer>
        <ContentCustomer 
        lineColor="#F7931B"
        titleCustomer="User Test #1"
        />

        <ContentCustomer 
        lineColor="#F7931B"
        titleCustomer="User Test #2"
         />
       
        <ContentCustomer 
        lineColor="#F7931B"
        titleCustomer="User Teste #3"
         />      
    </CustomerContainer>



    </Container>




)

}

export default CRM;`

[NegriHenrique]

Então, pelo que deu para entender você está colocando o tamanho fixo nessas divs de 300px, por isso ela não vai acompanhar o tamanho do container maior.

Para que ela seja proporcional à sua tela existem algumas formas mas creio que a melhor forma seria utilizando flex no na div pai dessas que você quer mexer o tamanho, exemplo:

 <CustomerContainer>
        <ContentCustomer 
        lineColor="#F7931B"
        titleCustomer="User Test #1"
        />

        <ContentCustomer 
        lineColor="#F7931B"
        titleCustomer="User Test #2"
         />
       
        <ContentCustomer 
        lineColor="#F7931B"
        titleCustomer="User Teste #3"
         />      
    </CustomerContainer>
export const CustomerContainer= styled.div`

  display: flex;
  width: 100%;
  justify-content: space-between;
gap: 0 10px;
`; 

export const ContentCustomer = styled.div`
background-color: ${props => props.theme.colors.secondary};
border-radius: 5px;
height: 300px;
color: white;
padding: 12px 10px;
display: inline-block;
`; 

[andretresso]

Muito obrigado pela força, consegui ajustar.
Grande abraço.