利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高利用flex布局在父元素和子元素宽高不明的

如题，本人经常设置宽高都是这种，先通过js获取父元素的宽高，别的子元素的宽高。再通过js赋值

this.height = this.$refs.xxx.offsetHeight - this.$refs.xxx.offsetHeight
<div :style="{'height':height+'px'}"></div>

当然以上的办法看起来就不太好，奈何本人水平有限，有没得别的方法，只能凑活这样用了

后来参考大神的项目发现了好的解决方案：父元素设置flex属性，子元素占位1 从而设置宽度如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100vh;
				display: flex;
				overflow: auto;
				/* flex-direction: row; 默认就是这个我就不设置了*/
			}
			.kk{
				flex: 1;
				background: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>ve</h1>
			<div class="kk">
				sfde
			</div>
			<h1>ddd</h1>
			
		</div>
	</body>
</html>

效果图如下

下面进阶一下子元素占位1 从而设置高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100vh;
				display: flex;
				overflow: auto;
				/* flex-direction: row; 默认就是这个我就不设置了 */ 
			}
			.kk{
				flex: 1;
				background: lightblue;
				display: flex;/*重要*/
				flex-direction: column;/*重要*/
			}
			.gg{
				flex: 1;/*重要*/
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<h1>ve</h1>
			<div class="kk">
				sfde
				<div class="gg">
					fefe
				</div>
			</div>
			<h1>ddd</h1>
			
		</div>
	</body>
</html>

总接一下：父元素一要设置flex,flex-direction 子元素设置占位1（我总觉得这是一种css布局方式，有名字，但是我不晓得，知道的大佬麻烦评论区告知一下谢谢