css中的flex:1存在的坑

<div class='wrap'>
    <div class='left'>左</div>
    <div class='right'>右</div>
</div>

<style>
    .wrap{
        display:flex;
    }
    .left{
        width:100px;
        flex-shirk:0;  //避免被flex:1擠壓
        white-space: pre-wrap; //實現標籤中顯示多個並列空格
    }
    .right{
        flex:1;  //自適應剩餘寬度
        word-wrap: break-word;   //設置數字或者字母換行
        word-break: break-all;
    }
</style>

以上代碼處理了 數字/字母太長 不換行的情況，已經flex:1擠壓佈局。