使用flex布局，垂直居中

要完成下面的樣式：

1：綠色部分寬度固定，紅色部分自適應寬度；

2：整體高度自適應，紅色和綠色部分的內容垂直居中；

html代碼：

<div class="main">
        <div class="left">111</div>
        <div class="right">22況撒來得及了大sadasdsad廈恐龍當家上了2</div>
</div>

css代碼：

body{
    .main{
        display: flex;
        .left,.right{
            font-size: 16px;
            height: 60px;
            background:green;    
        }
        .left{
            width: 0.5rem;
            display: flex;//主要是這兩行代碼
            align-items:center;//主要是這兩行代碼
        }
        .right{
            display: flex;
            align-items:center;
            flex: 1;
            background:red;
        }
    }
}