防止flexbox溢出父元素的子元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (201)

这个问题在这里已有答案

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'] {
    ??
}
提问于
用户回答回答于

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

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

上面的代码将使它们的宽度相等(从flex开始,0并相互增长)。你可能不希望这样。

如果您希望一个比例大于另一个,您可以将其更改为:

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

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

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

扫码关注云+社区

领取腾讯云代金券