## `flex: 1` を持つ Flex アイテムが Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

## `flex: 1` を持つ Flex アイテムが Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?

Barbara Streisand

Oct 25, 2024 am 01:48 AM

## Why Does a Flex Item with `flex: 1` Exceed Its Parent Height in Firefox, But Not Chrome?

Flex 項目が親の高さと Firefox のスクロールバーの機能を超えるのを防ぐ

Firefox では、子 flexbox 項目が flex: 1 でオーバーフローしていることが観察されます。 y: スクロールが親フレックスボックスの高さを超える可能性があり、その結果、コンテンツがオーバーフローし、スクロールバーが表示されなくなります。逆に、Chrome では、子項目は残りの垂直スペースを正しく埋め、スクロールバーが表示され、親の高さを超えません。

解決策

この問題を解決するには、flex: 1 を flex に置き換えます。 : 子フレックスボックス項目の場合は 1 1 1px。これにより、flex-basis が 1px の固定値に設定され、スクロールオーバーフローが発生してスクロールバーが表示されるようになります。

説明

このような場合、min-height: 0 を設定する一般的な方法にもかかわらず、、このシナリオでは不十分です。短縮ルール flex: 1 には flex-basis: 0 が含まれていますが、Firefox と Edge ではこれではオーバーフローをトリガーするには不十分です。

MDN によると、

オーバーフローが影響を与えるには、次のようになります。ブロックレベルのコンテナには、高さ (高さまたは最大高さ) が設定されているか、空白が nowrap に設定されている必要があります。

標準化された動作を確保し、オーバーフローを有効にするには、フレックスベースの固定高さを設定します。 1px などの最小値

以上が## `flex: 1` を持つ Flex アイテムが Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

満足している属性を持つインラインテキストエディターを作成しますMar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較するMar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

node.jsとexpressのMulterを使用してファイルアップロードしますMar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします

See all articles