输入/按钮元素不会在Flex容器中缩小在Flex容器中使用输入和按钮元素时，flex和/或flex-grow属性似乎没有做任何事情。代码，演示我的问题。button,input {
font-size: 1rem;}button {
border: none;
background-color: #333;
color: #EEE;}input {
border: 1px solid #AAA;
padding-left: 0.5rem;}.inputrow {
width: 30rem;
display: flex;
margin: 0 -.25rem;}.inputrow>* {
margin: 0 .25rem;
border-radius: 2px;
height: 1.75rem;
box-sizing: border-box;}.nickname {
flex: 1;}.message {
flex: 4;}.s-button {
flex: 1;}<div class="inputrow">
<input type="text" class="nickname" placeholder="Nickname">
<input type="text" class="message" placeholder="Message">
<button type="submit" class="s-button">Submit</button></div>显示我期待的代码。（使用DIV代替input和button）。.inputrow {
width: 30rem;
display: flex;
flex-flow: row nowrap;
margin: 0 -.25rem;}.inputrow>* {
margin: 0 .25rem;
height: 1.75rem;}.nickname {
flex: 1;
background-color: blue;}.message {
flex: 4;
background-color: red;}.s-button {
flex: 1;
background-color: green;}<div class="inputrow">
<div class="nickname">Nickname</div>
<div class="message">Message</div>
<div class="s-button">Submit</div></div>
3 回答
蓝山帝景
TA贡献1843条经验 获得超7个赞
一种input元素，不像div，带有默认的宽度。
浏览器自动给出input宽度。
input {
border: 1px solid blue;
display: inline;}div {
border: 1px solid red;
display: inline;}<form> <input> <br><br> <div></div></form>
此外，flex项目的初始设置是min-width: auto。这意味着物品不能在主轴上收缩到其宽度以下。
因此，input元素不能收缩到其默认宽度以下，并且可能被迫溢出Flex容器。
您可以通过将输入设置为min-width: 0（修改后的codepen）来覆盖此行为
在某些情况下，您可能需要使用width: 100%或覆盖输入宽度width: 0。
翻过高山走不出你
TA贡献1875条经验 获得超3个赞
我想扩展Michael_B解决方案
在某些情况下，您可能需要使用width：100％或width：0来覆盖输入宽度。
你也可以 calc(100%)
心有法竹
TA贡献1866条经验 获得超5个赞
width: 100% || 0在这里为我工作，但最小宽度：0不。我想这[min || max]-width和width它本身在元素大小上有一个主要特征。Flex之后，并根据其值，增加其特性以提供灵活性等。奇怪的是，flex-basis在这种情况下宽度没有任何普遍性，而在其他一些情况下，它有。[CSS是敬畏]一些......哈哈
- 3 回答
- 0 关注
- 685 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消