Flexbox - 使用flex-grow，shrink，basis来增加相对于字段的标签

Question

我有一个长标签，div中没有​​空格。查看截图。标签可以根据本地化而增长或缩小。我希望标签能够增长到所需的空间，从而推动该领域变得更小。字段div需要具有60％的弹性基础以确认其上方和下方的其他字段，但如果标签需要增长则应该缩小。目前存在重叠，如截图中所示（如果我将溢出：隐藏到标签的div中，则会被截断）。

我尝试过修改flex-grow和flex-shrink的各种值无济于事。我不认为这些属性是我需要完成的，但不确定。

HTML：

<div class="class-flex">
    <div class="label-column">
        I'mALongLabelWithNoSpaces:
    </div>
    <div class="field-column">
        <!-- input field which should shrink goes here -->
    </div>
</div>

CSS：

.class-flex {
    display: flex;
}

.label-column {
    display: flex;
    flex-basis: 40%;
    align-items: center;
    padding: 3px 0 3px 5px;
}

.field-column {
    display: flex;
    flex-basis: 60%;
    padding: 3px 7px 3px 5px;
    align-items: center;
}

Answer 1

这里的诀窍是在输入div上使用60％的flex-basis，但允许它使用flex-shrink:1缩小，但不能通过设置flex-grow:0来增长。

可以使用flex: 0 1 60%;

的单个属性设置

然后我们将输入设置为100％宽...并使用justify-content:space-between分隔两个div。

因此标签div没有设置宽度并根据需要扩展，输入div从60％开始，但只能变小。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.class-flex {
  display: flex;
  width: 400px;
  border: 1px solid red;
  margin: 1em auto;
  justify-content: space-between;
}

.label-column {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 5px;
}

.field-column {
  display: flex;
  flex: 0 1 60%;
  align-items: center;
  padding: 3px 0;
}

input {
  width: 100%;
}

<div class="class-flex">
  <div class="label-column">
    I'mALongLabelWithNoSpaces:
  </div>
  <div class="field-column">
    <input type="text">
  </div>
</div>

<div class="class-flex">
  <div class="label-column">
    Label:
  </div>
  <div class="field-column">
    <input type="text">
  </div>
</div>