首頁 >web前端 >css教學 >為什麼我的 Flex 容器的輸入元素不縮小?

為什麼我的 Flex 容器的輸入元素不縮小?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-21 04:41:13681瀏覽

Why Don't My Flex Container's Input Elements Shrink?

Flex 容器元素不收縮

當嘗試在包含輸入和按鈕元素的Flex 容器中使用flex 和flex-grow 時,預期可能不會發生調整大小行為。與 div 不同,此異常是由瀏覽器指派給輸入元素的預設寬度引起的。

以下是描述瀏覽器自動寬度分配的片段:

為什麼我的 Flex 容器的輸入元素不縮小?

在這種情況下,瀏覽器無論Flex 設定如何,都會為輸入賦予設定的寬度。

請考慮以下事項:

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

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



在提供的程式碼片段中,輸入元素保留其預設寬度,而div 會適應彈性容器的尺寸。

以上是為什麼我的 Flex 容器的輸入元素不縮小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn