如何阻止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'] {
??
}
发布于 2019-03-05 00:52:46
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。
https://stackoverflow.com/questions/54987780
复制相似问题