Layout responsivo

Denis, faz um teste pra mim? Verifica se usar 100vw no height em vez do 100% funciona, por favor?

Bom dia, Fiz como solicitado Wanderson e não funcionou, ficou praticamente igual com 100%

Obs: Eu coloquei o height: 100vw; em todos desdo HTML,

Caso não era pra ser em todos me avisa

Alguma outra ideia do que pode ser ?

Denis, mostra pra gente o restante do estilo da página. Pode ter alguma coisa afetando o comportamento da relação dos elementos com o container do background.

Retirei a cor das bordas porem essa foi a unica mudança.

html{

  height: 100%;
}
body{

  height: 100%;
}
#root{  
  background-image: url("./img/fundo.jpg");
  height: 100%;
}
#div-app{

  height: 100%;
}

#div-main{

  height: 100%;
}

#container-login{

    height: 100%;
}
.row-login{

  height: 100%;
}
#form-login{
  padding: 5%;
  border-radius: 3%;
  height: 100%;
}

.btn-login{
  margin-top: 25%;
}
#logo-header{
width: 15%;
}

Bom dia Wanderson, apaguei esse exercício que estava fazendo e comecei outro do zero.

O comportamento das telas estava funcionando como o esperado sem surpresas, porem aconteceu um problema semelhante, uma row esta passando o tamanho pra fora da sua div pai.

img = https://ibb.co/iqiVcH

em azul é a div pai e dentro dela a row em preto, o codigo esta assim:

    render(){
        var nomeUsuario = sessionStorage.getItem("nome")
        var idUsuario = sessionStorage.getItem("usuario")
        return(
         <div className="border border-primary">{/* DIV pai cor azul*/}
            <Helmet> <title itemProp="name" lang="en">{idUsuario} - {nomeUsuario}</title> </Helmet>
            <Header></Header>
            <div className="row border border-dark"> {/* DIV cor preto*/}
                <div className="col-6 border border-dark">
                    <ListGroupCollapse/>
                </div>
                <div className="col-6 border border-dark">
                  <Chart type="bar" data={this.state.notasMes} />
                </div>         
            </div>                
         </div>
        );

    }

Posso estar fazendo errado mas, teoricamente a row deveria respeitar o tamanho determinado pela sua div pai , ou se não pelo menos ela deveria estender junto a div azul, não passar por cima como se estivesse fora da div.

Wanderson teria algum curso para me indicar, onde eu consiga entender melhor isso, pois estou travando muito nesse assunto que parece ser basico...

Quando um elemento sobrepassa outro nós podemos ter basicamente dois casos:

1. Uso de propriedades de posicionamento.
2. Propriedades de dimensão que forçam a sobreposição.

Tudo isso é visto nos cursos de HTML5 e CSS3 I e II. Caso você pretenda estudar questões de responsive diretamente, temo o curso de Design Responsivo também.

Que framework CSS você está utilizando? Nenhum?

Estou usando MDB Bootstrap e Sass,

Mas o estranho é que já refiz usando apenas HTML CSS JS e rodou tudo certo, quando eu uso o React que começa dar essas loucuras.

Sera que pode ser a maneira como o React trabalha ? fazendo com que eu tivesse que ter alguns cuidados diferentes com ele ?

O React não deve interferir nos estilos CSS. A classe row do bootstrap tem uma manipulação de margens um pouco estranha que até hoje eu não entendi bem por que é assim. Ele usa um -20px ou -15px na lateral esquerda e aumenta o tamanho do elemento em no mesmo valor para centralizar.

Isso deve ser por causa das margens das colunas.

O que eu estou me perguntando aqui é: onde está seu container? Como ele centraliza a área de conteúdo na página , você acaba não tendo esses problemas.

Aliás, o row nunca recebe estilos extras. Ele é apenas para agrupar divs com até 12 colunas.

Da forma que vejo agora, não me parece um problema de CSS. Sim na forma como está usando o bootstrap.

Obrigado pela atenção Wanderson, vou dar uma estudada no Bootstrap e depois refazer o exercício, caso vir a acontecer novamente eu abro uma nova discussão.

Ótimo! Fique a vontade. Estaremos por aqui pro que precisar!