我在一个flex-flow: row nowrap
的div内有一个输入,而在flex-flow: column nowrap
的另一个div内有一个输入。
为什么输入没有增长(在Chrome上为188px,YMMV),即使没有flex-grow: 1
也是如此?
*, ::before, ::after {
box-sizing: border-box;
}
.wrapper {
align-items: stretch;
background-color: #ffffff;
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
flex-flow: column nowrap;
margin: 0.75rem 0.5rem;
max-width: 464px;
padding: 1rem;
}
.input-wrapper {
align-items: stretch;
background-color: #ffffff;
border: 1px solid #ebf0ff;
display: flex;
flex-flow: row nowrap;
padding: 0.75rem;
}
input {
border: none;
font-size: 1rem;
font-weight: 600;
outline: none;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.token-wrapper {
align-items: center;
display: flex;
flex-flow: row nowrap;
flex-shrink: 0;
margin-left: 0.25rem;
}
.token-wrapper span {
font-size: 1rem;
font-weight: 700;
}
.separator {
background-color: #ebf0ff;
margin: 0.25rem 0rem 0.25rem 0.5rem;
width: 1px;
}
.max-amount-wrapper {
background-color: #ebf0ff;
border-radius: 0.25rem;
font-size: 0.8125rem;
font-weight: 600;
margin-left: 0.5rem;
padding: 0.5rem 0.375rem;
}
.max-amount-wrapper span {
font-size: 0.75rem;
font-weight: 400;
]
<div class="wrapper">
<div class="input-wrapper">
<input name="amount" placeholder="0" type="number" />
<div class="token-wrapper">
<span>DAI</span>
</div>
<div class="separator"></div>
<div class="max-amount-wrapper">
Max (<span> 84 </span>)
</div>
</div>
</div>
答案 0 :(得分:1)
由于@Michael_B的评论之一,我设法确定了问题所在。浏览器为input
标签设置了最小宽度。
我在输入上应用了width: 0
,宽度缩小到了我期望的值。