card empurra o componente pra fora

[Mr_Galvao]

Então pessoal, estava no meio dos meus estudos de html, css e JS e decidi fazer um mini calculador de imc. Durante o desenvolvimento do mesmo, me vi confuso com algo, eu decidi desenvolver o conteúdo em um card e separar ele em dois extremos (direita e esquerda) e assim organizar tudo. Mas quando eu fui definir a largura e altura de um dos extremos, que no caso é uma <div>,  ele simplesmente saia do card, mesmo estando interno a ele no html. Segue os arquivos html e css, se alguém conseguir me ajudar a entender o que está havendo, agradeço de coração.

style.cssindex.html

Editado Março 23, 2023 por Mr_Galvao

[Kleverson Cruz]

Opa, dei uma olhada no código e parece que o problema está na classe:

.left-card {
    height: 100%;
  ...
}

Com height de 100% o card da esquerda vai empurrar quaisquer outros elementos para fora do card.

Além disso, o elemento card está com orientação vertical fazendo que o right-card esteja abaixo de left-card.

Para corrigir isso você pode utilizar:

.card {
    display: flex;
	...
}

Essa documentação explica melhor os conceitos de flexbox e pode lhe ajudar a posicionar os elementos como precisa.

[Mr_Galvao]

21 minutos atrás, Kleverson Cruz disse:

Opa, dei uma olhada no código e parece que o problema está na classe:

.left-card {
    height: 100%;
  ...
}

Com height de 100% o card da esquerda vai empurrar quaisquer outros elementos para fora do card.

Além disso, o elemento card está com orientação vertical fazendo que o right-card esteja abaixo de left-card.

Para corrigir isso você pode utilizar:

.card {
    display: flex;
	...
}

Essa documentação explica melhor os conceitos de flexbox e pode lhe ajudar a posicionar os elementos como precisa.

Realmente era isso, obrigado por disponibilizar um pouco do seu tempo pra me ajudar, tmjt man! ❤️