忍你很久了，今天就把你給解決！
情境
如果你想做這個畫面：
你大概會這樣寫：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style>
.input-block {
display: flex;
}
.input-block__text {
flex-shrink: 0;
}
.input-block__input {
flex: 1;
}
</style>
<div class="input-block">
<span class="input-block__text">姓名：</span>
<input class="input-block__input" type="text">
</div>
|
這時候你就會發現 <input> 的寬度沒辦法縮到很小：
長話短說
在上面的例子你可能會想說加上 flex-shrink: 0 或 min-width: 0 來處理，但很抱歉，都沒有用哦！
其實 <input> 會自帶一個寬度，應該是標籤上的 size 屬性：
1
| <input type="text" size="20">
|
在 Chrome 上大概會是 200px 的寬，所以如果你沒有設定 width 的話，當 <input> 被縮放到很小的時候，他就會固定在 size 的寬度。
至於 Flex 的部分比較特殊，flex: 1 確實可以讓元素吃到剩餘空間來填滿容器，但如果沒有設定 width 就會有上面的問題。
解決辦法
記住一個要訣就好，如果你要讓 <input> 寬度可以自適應，那就幫他加上 width：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style>
.input-block {
display: flex;
}
.input-block__text {
flex-shrink: 0;
}
.input-block__input {
flex: 1;
width: 100%;
}
</style>
<div class="input-block">
<span class="input-block__text">姓名：</span>
<input class="input-block__input" type="text">
</div>
|
如果是在 block-level 的空間中也是同樣道理：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
.input-block {
display: block;
}
.input-block__input {
width: auto;
}
</style>
<div class="input-block">
<span class="input-block__text">姓名：</span>
<input class="input-block__input" type="text" size="20">
</div>
|
把 <input> 加上 width：
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
.input-block {
display: block;
}
.input-block__input {
width: 100%;
}
</style>
<div class="input-block">
<span class="input-block__text">姓名：</span>
<input class="input-block__input" type="text" size="20">
</div>
|
