Understanding how child elements inherit parent css properties - html

Question

I have a lack of understanding how the css settings of a parent restrict its children.
Simple example:
I have a container with three buttons.
play button
fast forward button
fast backwards button
My goal is the following:
create a grid 1x3 (row x column)
aling buttons inside of the grid
With this I went to work and ended up here:
.adaptations {
margin-bottom: 20px;
}
.video-button-container {
height: 100px;
width: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
}
.video-button {
height: 100%;
}
.video-button img {
height: 70%;
}
<div class="adaptations video-button-container">
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button middle-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
</div>
Here's my problem: I managed to implement the said goal with fixed sizes (width, height). However, it is not desireable since screen sizes differ, hence, make it responsive and here lies my problem.
What I learned is that if I set my parent-div to height: 100px; the child elements will adjust themselves inside that div. Therefore I said height: 100%. Which sounds like (as far as I understand this): "You can use all the height that is available to you, therefore max. 100px)
Can you enlighten me on what I am missing?

Answer 1

I hope this is what you are trying to achieve.
.adaptations {
margin-bottom: 20px;
}
.video-button-container {
height: 100px;
width: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
}
.video-button {
height: inherit; /* Use 'inherit' here instead of '100%' */
}
.video-button img {
height: 70%;
}
<div class="adaptations video-button-container">
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button middle-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
</div>