Flex コンテナの入力要素が縮小しないのはなぜですか?

フレックス コンテナ要素が縮小しない

入力要素とボタン要素を収容するフレックス コンテナ内で flex および flex-grow を利用しようとすると、予想されるサイズ変更動作が発生しない可能性があります。この異常は、div とは異なり、ブラウザによって入力要素に割り当てられるデフォルトの幅から発生します。

以下は、ブラウザの自動幅割り当てを示すスニペットです:

このシナリオでは、ブラウザーフレックス設定に関係なく、入力に設定された幅を割り当てます。

次の点を考慮してください:

input {
  border: 1px solid blue;
  display: inline;
}

div {
  border: 1px solid red;
  display: inline;
}

提供されたスニペットでは、input 要素はデフォルトの幅を保持しますが、 div は、フレックス コンテナーの寸法に合わせて調整されます。

以上がFlex コンテナの入力要素が縮小しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。