防止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。