SOURCE

<div class="box">
    <div class='left'>
        left 部分撑高父元素，
        父元素高度由我来定
    </div>
    <div class="right">
        right 部分脱离文档流，高度跟随父元素，效果就像跟随left一样
                <p>01</p>
        <p>02</p>
        <p>03</p>
        <p>04</p>
        <p>05</p>
        <p>06</p>
        <p>07</p>
        <p>08</p>
        <p>09</p>
        <p>10</p>

    </div>
</div>

 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.box {
    background: #ccc;
    display: block;
    position: relative;
}

.left {
    width: 60%;
    /* 这里的高度是内容决定的，硬编码只是为了直观 */
    height: 300px; 
    border: 1px solid #333;
}

.right {
    /* 脱离文档流且放置在父元素内的右上方 */
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    overflow-y: scroll;
    /* 以上为核心代码 */
    width: 40%;
    border: 1px solid #f00;
}

p {
    background: darkgoldenrod;
    margin: 0.25rem 0;
    padding: 1rem;
    
}