I want the graph div to have a height that stretches all the way to the end of it's parent (graph-container) container, but not extend past it. I have tried setting graph's height to both 100% and inherit, but both of them result in it extending past it's parent container's bottom edge (I don't want to use overflow: hidden). Is there a way to set the height property on graph so it automatically sets its height to the right value?
Current output:
What I want: 
Current code:
* { margin: 0; padding: 0; box-sizing: border-box; font-size: 20px;}.wrapper { height: 100vh; width: 100vw; display: flex; justify-content: center;}.graph-container { border: 3px solid black; height: 60vh; width: 70vw; margin-top: 10vh;}.graph { height: 100%; width: 100%; border: 3px solid red;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="style.css" /></head><body><div class="wrapper"><div class="graph-container"><h1>Graph Container</h1><div class="graph">Graph</div></div></div></body></html>