如何为设置了display:flex属性的文本元素强制换行？

现有代码 #

相关样式 #

/* label基础样式 */
.label {
  display: flex;
  align-items: flex-start;
}

/* 布局通用样式 */
.row {
  align-items: center;
  flex-direction: row;
}

.col {
  align-items: stretch;
  flex-direction: column;
}

.fullwidth {
  width: 100%;
  align-items: start;
}

.gap {
  row-gap: 12px;
  column-gap: 12px;
}

.grow {
  flex-grow: 1;
}

页面结构 #

<div class="col fullwidth">
  <div class="row fullwidth gap">
    <label style="width:100px;">
      <template slot="text">
        <div>Very long text very long text</div>
      </template>
    </label>
    <label class="grow">
      <template slot="text">
        <div>text text</div>
      </template>
    </label>
  </div>
  <div class="row fullwidth gap">
    <inputText style="width: 100px;" />
    <inputText class="grow" />
  </div>
  <div class="row fullwidth gap">
    <label style="width: 100px;">
      <template slot="default">
        <div>Please type in the name of your city</div>
      </template>
    </label>
    <label class="grow">
      <template slot="default">
        <div>Please type in the name of your city</div>
      </template>
    </label>
  </div>
</div>

问题说明 #

需要实现两个输入框并排展示，上下分别对应放置标签和描述内容。标签和输入框均为Vue组件，label组件已设置display:flex属性。
实际开发中发现，已为第一个label和对应输入框的容器设置100px固定宽度，但label内的超长内容仍然溢出，无法自动换行。此前尝试设置flex-wrap未生效，且必须保留label的display:flex属性。

解决方案 #

为label新增两个CSS属性即可解决问题：

.label {
  display: flex;
  align-items: flex-start;
  /* 新增两行 */
  flex-wrap: wrap;
  white-space: normal;
}

内容的提问来源于stack exchange，提问作者janesbeat