等高布局 - flex

HTML

<div class="box">
    <div class="side"><h1>title</h1>
    <h2>
    subtitle
    </h2>
    <p>
    This is a test.
    </p>
    </h1>
    </h1></div>
    <div class="main">整个区域的高度随着左边变化</div>
</div>

CSS

.box {
    display: flex;
}

.side,
.main {
    flex: 1;
}

.side {
    background-color: #afafaf;
}

.main {
    background-color: #e9e9e9;
}