防止flexbox的孩子溢出父母？ [复制]

Question

JSFiddle

如何阻止 flexbox 的子元素溢出容器？

• 我不希望将溢出设置为隐藏。
• 我希望两个孩子都适合父母。
• 没有换行到下一行。

HTML：

<div>
  <form>
    <input type="text">
    <input type="submit">
  </form>
</div>

CSS：

div {
  background: gold;
  width: 120px;
}

form {
  display: flex;
}

input[type='text'] {
    ??
}

input[type='submit'] {
    ??
}

Answer 1

CSS 输入很难伸缩，因为它们是被替换的元素。您必须从操作系统覆盖一些默认样式：

 input {
    min-width:0;
    flex: 1 1 0;
 }

上面的代码将使它们的宽度相等（从0 的flex-basis 开始并彼此相等地增长）。你可能不想要那个。

如果您希望一个比另一个按比例增长，您可以将其更改为：

input[type='text'] {
    flex: 2 1 0;
}

input[type='submit'] {
    flex: 1 1 0;
}

这使得文本输入的增长速度是提交按钮的两倍。即 - 文本元素将占据 2/3，提交按钮将占据 1/3。