Kevin Powell - Community•2y ago

How to make children dont overflow with height 100%

I just discovered that width: auto and width: 100% are not the same thing, so I made this script to test it, but now im wondering, how can I make the height 100% but without overflowing and considering the margins? Do I have to use calc()? How do I make the children dont overflow the parent? Because I cant use height: auto since it just becomes 0

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  width: 500px;
  padding: 10px;
  height: 300px;
  background: red;
}

.child {
  background: blue;
height: 100%;
  width: auto;
  margin: 20px;
  border: 10px solid green;
}

.container {
  width: 500px;
  padding: 10px;
  height: 300px;
  background: red;
}

.child {
  background: blue;
height: 100%;
  width: auto;
  margin: 20px;
  border: 10px solid green;
}

11 Replies

b1mind•2y ago

Use min height

lko•2y ago

minheight: 100?

b1mind•2y ago

No what ever hard value Min-height: 300px; Setting fixed values won't change based on content For the child yes you could use min height 100 too

lko•2y ago

Like that? Doesnt work

.container {
  width: 500px;
  padding: 10px;
  min-height: 500px;
  background: red;
}

.child {
  background: blue;
  min-height: 100%;
  width: auto;
  margin: 20px;
  border: 10px solid green;
}

.container {
  width: 500px;
  padding: 10px;
  min-height: 500px;
  background: red;
}

.child {
  background: blue;
  min-height: 100%;
  width: auto;
  margin: 20px;
  border: 10px solid green;
}

b1mind•2y ago

Are you setting border box?

lko•2y ago

b1mind•2y ago

I'd look up border box, Kevin has a video on it.

lko•2y ago

I tried border box but it still has problem due the margin

b1mind•2y ago

It's there a reason your setting height? Just take it off parent Let the child determine height

lko•2y ago

i think i'd do that then, i just set it to the parent because I wanted to know if there was another way to do it

b1mind•2y ago

Good rule of thumb is not setting heights on content wrappers and if so use min so it can grow

Gaming

Programming

How to make children dont overflow with height 100%