css flex 一行2个元素 不能挤压空间

    <div class="step_title">
         <span class="step_title_text">{{ item2.eventAt }} </span>
         <span class="step_title_text2"> {{ item2.event }}</span>
     </div>

 .step_title {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    .step_title_text {
      display: inline-block;
      min-width: 200px;
      width: 200px;
      flex-shrink: 0;
    }
    .step_title_text2 {
      flex: 1;  
      word-break: break-word;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }