两个DIV横向并列，一个高度固定，另一个如何自由调整大小？

在DIV0中有两个DIV，其中DIV1的大小是固定的，DIV2无法改变高度，DIV0只会随着DIV1的改变而改变。应该如何调整？
现在希望的效果是：DIV2随着内容改变，高度会改变，DIV1大小不变，垂直居中。
CSS设置为：

DIV0{
        height: 100%;
        width: 100%;
        position: relative;}
DIV1{
         width: 14%;
          height: 14%;
          display: inline-block;
}
DIV2{
          display: inline-block;
          position: absolute;
          height: 100%;}

img

DIV2 absolute定位需要设置宽度，要不是0无法显示出来。可以用flex布局，align-items: center;

<!doctype html>
<style>.wrap{width:640px;margin:50px auto}
    #DIV0 {
        height: 100%;
        width: 100%;
        position: relative;
        background: #ccc;
        padding: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box
    }

    #DIV1, #DIV2 {
        width: 200px;
        height: 200px;
        display: inline-block;
        background: blue
    }

    #DIV2 {
        height: auto;/*自动高度*/
        background: yellow
    }
</style>
<div class="wrap">
    <div id="DIV0">
        <div id="DIV1"></div>
        <div id="DIV2">
            1<br />2<br />3<br />
            1<br />2<br />3<br />
            1<br />2<br />3<br />
            1<br />2<br />3<br />
            1<br />2<br />3<br />
            1<br />2<br />3
        </div>
    </div>
</div>

如果希望 DIV2 随着内容的改变而改变高度，可以在 CSS 中设置 DIV2 的 height 为 auto，这样 DIV2 就可以随着内容的改变而改变高度了。

如果希望 DIV1 垂直居中，可以在 CSS 中设置 DIV1 的 line-height 为 DIV1 的高度，这样 DIV1 中的内容就会垂直居中了。

如果希望 DIV2 在 DIV1 的右侧并且左对齐,可以使用

DIV2{
left:14%;
top:0;
bottom:0;
width:86%;
}

如果希望 DIV2 在 DIV1 的下面,可以使用

DIV2{
top:14%;
left:0;
right:0;
bottom:86%;
}

上面是一些简单的布局示例，可以根据具体需求进行调整。