モバイルユーザーとデスクトップユーザーに使用される単純な数値セレクターを作成しようとしています。私の考えは、入力を「プラス」ボタンと「マイナス」ボタンで囲むことです。
入力フィールドの応答性を除いて、すべてが正常に機能します。どういうわけか、それはコンテナの残りのサイズに縮小しません。
したがって、私が欲しいの2 remは、コンテナの残りのすべての幅を占める入力の周りの固定サイズのスパン（私の場合）です。
コードは次のとおりです。
body {
background: #f5f5f5;
}
.outer-container {
width: 300px;
border: 1px solid gray;
padding: 10px;
}
.container {
display: inline-flex;
align-items: center;
}
.item {
dsipaly: inline-block;
height: 2rem;
width: 2rem;
font-size: 2rem;
line-height: 2rem;
border: 1px solid black;
border-radius: 50%;
text-align: center;
}
input {
font-size: 2rem;
margin: 0 10px;
}<div class="outer-container">
<div class="container">
<span class="left item">-</span>
<input type="text" />
<span class="right item">+</span>
</div>
</div>を使用するレイアウトを作成しましたflexboxが、入力は縮小せず、コンテナーをオーバーフローします。
X軸でコンテナをオーバーフローさせることなく、使用可能なすべてのコンテナ幅を取得するために入力を縮小することは可能ですか？
あなたはこれを試すことができます：
body {
background: #f5f5f5;
}
.outer-container {
width: 300px;
border: 1px solid gray;
padding: 10px;
}
.container {
display: inline-flex;
align-items: center;
}
.item {
height: 2rem;
width: 2rem;
font-size: 2rem;
line-height: 2rem;
border: 1px solid black;
border-radius: 50%;
text-align: center;
}
input {
font-size: 2rem;
margin: 0 10px;
min-width:0; /* Remove the automatic minimum size set so the element can shrink*/
width: 87%; /* Set any value of width here as reference*/
flex: 1; /* make the item grow to fill the remaining space */
}<div class="outer-container">
<div class="container">
<span class="left item">-</span>
<input type="text" >
<span class="right item">+</span>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加