Kevin Powell - Community•2y ago

issue with using % units while using them to set the height and with

Hey folks I'm having some issue while using the % units to the height and width of my div etc. This is the CSS of the parent container

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: #6A44F2;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: #6A44F2;
}

and this is the CSS of child container

.rulesContainer {
  display: flex;
  flex-direction: column;
  background: white;
  height: 80%;
  width: 30%;
  margin: 10% 35%;
  padding: 1vh 1vw;
}

.rulesContainer {
  display: flex;
  flex-direction: column;
  background: white;
  height: 80%;
  width: 30%;
  margin: 10% 35%;
  padding: 1vh 1vw;
}

In the above case the computed value of height is 495.031px but if I do some changes in the above CSS and the new CSS is

.rulesContainer {
  display: flex;
  flex-direction: column;
  background: white;
  height: 80vh;
  width: 30vw;
  margin: 10vh 35vw;
  padding: 1vh 1vw;
}

.rulesContainer {
  display: flex;
  flex-direction: column;
  background: white;
  height: 80vh;
  width: 30vw;
  margin: 10vh 35vw;
  padding: 1vh 1vw;
}

then in this case I get computed value of the height as 444.797px can anyone tell me why I'm getting this difference

7 Replies

Unknown User•2y ago

Message Not Public

Aditya Kirad•2y ago

but isn't % units relative to the parent container

Unknown User•2y ago

Message Not Public

Aditya Kirad•2y ago

But why there is difference in computed value for vh and % Also can you give the link of stackoverflow question Here 80% should be equal to 80vh

Unknown User•2y ago

Message Not Public

Kevin Powell•2y ago

percentage as a height doesn't work unless there is a declared height. min-height won't work here. That's because, unless the parent has an explicit height, the child element can influence the parent. So, if you declare height: 80% on the child, that 80% cannot influence the height of the parent. If it could, it would become a recursive calculation (the height of the parent defines the height of the child which defines the height of the parent...). Because it's a min-height, the height can be bigger than 100vh, so doesn't work.

Aditya Kirad•2y ago

Thanks kevin I recently came across your video about css and other stuff and I have to say that you are one of the best frontend instructor Your videos are really helpful and filled with so much abundance of knowledge

Gaming

Programming

issue with using % units while using them to set the height and with