Mr. A has not written the front-end code for a while, and I read the flex layout today. I think it is really convenient to do it with a few lines of configuration that used to be solved by js!
code above
<html>
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<style>
.hbox {
display: flex;
}
.vbox {
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body style="background: rgb(255, 255, 255);">
<div style="display: flex; height: 100%;">
<div style="width: 100px;background: coral;height: 100%;"></div>
<div class="vbox" style="
flex-grow: 1;
height: 100%;
background: beige;
">
<div style="
height: 100px;
border: 5px solid darkgray;
"></div>
<div style="
border: 5px solid cadetblue;
flex-grow: 1;
"></div>
</div>
</div>
</body>
</html>
you're done~~
