height 100% not working

[west lynx]

first of all i wonna say i did google for like half an hour and tried what i found but nothing seems to work. is you can see in the code the different colors(that appear once you press the button) are supposed to stretch full height but are just stuck at the top for some reason, very confusing.
only thing that actually changed the height was "height: 88vh;", but there has to be a more sensible way to set the height?
(also there are borders where there shouldnt be, i thought i was done with css, guess not xD)
thanks in advanced!

code: https://scrimba.com/scrim/co0a54263925dc57521bfdba1

[blissful holly]

Hey @west lynx ,
Nice job so far!
remember that a percentage always refers to the parent. In this case, you're telling that .color-container div to be height: 100% of its parent. But what is the parent? Does it have a height? If that's not relevant, then you can use a value in px/em/vh etc instead.

[west lynx]

thank you, although i did try that solution, but a set px number for the parent wont make sense as it would not scale, but if i give 100vh its too much so there is a scroll, should i specify something like 90vh or is there a better way? i just cant find it if there is.

[blissful holly]

So, if it doesn;t make sense on the parent, set a height on the .color-container

[west lynx]

i aplogize for the back and forth but i really must be missing something, if i put a fixed height on either the parent or the .color-container it could not scale for the full width of the computer, right? what would you do so it scales and still looks the same?

[blissful holly]

Sure, here's a scrim: https://scrimba.com/scrim/cocbc40129200147bc4f2c078

[west lynx]

yes work amazing thank you so much, just gotta figure out how to copy to clipboard and ill be done😄

[blissful holly]

note that copy to clipbaord won't work on scrimba because of the mini-browser's limitations. have to test on local environment.