入力サイズが無視され、親要素の100％に設定されています

Question

入力サイズは、サイズ属性を無視し、その代わりに親要素の幅を100％に設定しているようです。

のCss：

.lespan { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    background: red; 
    min-width: 300px; 
    input { 
    min-width: 0px; 
    size: 5; 
    } 
} 

input { 
    min-width: 0px; 
    size: 5; 
} 

HTML：

<span class="lespan"> 
    hello 
    <input type="text"> 
</span> 
<input type="text"> 

Codepen：私は両方の入力がサイズの5

Answer 1

です。
使用を停止無効なプロパティ値。 サイズは属性であり属性はHTMLに属します。 Set input size attribute with CSS?

ブラウザでコードを常に検査してください。
サイズを設定する場合は、入力の幅を設定します。

.lespan { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    background: red; 
 
    min-width: 300px; 
 
} 
 

 
input { 
 
    width: 100px; 
 
}

<span class="lespan"> 
 
    hello 
 
    <input type="text" > 
 
</span> 
 
<input type="text">

Answer 2

sizeようにしたいと思いhttps://codepen.io/basickarl/pen/Lybvyz

が有効ではありませんcss atributeですが、html属性。あなたがそうのようにそれらを設定することもできます。

<input type="text" size="5"> 

また、display:flexは、入力のサイズの属性値を破るだろう、あなたの代わりにsizeのCSS width属性を使用し、display:blockを使用するかそこらのhtml structueを変更する場合があります入力要素がコンテナの外側にある場合display:flex

また、タグ名とクラス名の両方を使用して要素に特定のスタイルを適用することはできません。

input.lespan { 
    min-width: 0px; 
    size: 5; 
} 

Answer 3

あなたは、CSS widthプロパティを使用することができます。

input{ 
    width:200px; 
    } 

またはHTML

<input type="text" size="5"> 

Answer 4

だけ.lespanにalign-items: flex-start;を追加します。ここではあなたが間違った問題を指している更新CodePen

.lespan { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    background: red; 
 
    min-width: 300px; 
 
    align-items: flex-start; 
 
} 
 

 
.lespan input { 
 
    min-width: 0px; 
 
    size: 5; 
 
} 
 

 
input { 
 
    size: 5; 
 
}

<span class="lespan"> 
 
    hello 
 
    <input type="text"> 
 
</span> 
 
<input type="text">