防止flexbox的子项溢出父项？[副本]

Question

JSFIDLE

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

• 我不希望溢出设置为隐藏

超文本标记语言：

<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的弹性基础开始，并彼此相等地增长）。你可能不想那样。

如果希望其中一个按比例比另一个大，可以将其更改为：

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

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

这使得文本输入以两倍于提交按钮的速度增长。i、 e.-文本元素占2/3，提交按钮占1/3。