Chromeのネストされたフレックスボックスレイアウトで高さのパーセンテージが機能しない

debugcn 投稿 Dev

モネフ

FirefoxとIEで完全に機能する次のレイアウトがあります。 Firefox

残念ながら、Chromeではかなり壊れています。つまり、親の高さが100％であっても、濃い青色のコンテナは折りたたまれています。クロム

私はこのアプローチを試しましたが、運がありませんでした。他のブラウザで壊さずにChromeでこれを修正する方法はありますか？

html,
body {
  height: 97%;
  margin: 0;
  padding: 0;
}

div {
  border: 10px dotted teal;
}

.container {
  display: flex;
  border-color: tomato;
  height: 100%;
}

.row {
  flex-flow: row;
}

.column {
  flex-flow: column;
}

.item1 {
  flex: 1;
}

.item2 {
  flex: 2;
}

.item3 {
  flex: 3;
}

.c1 {
  border-color: gold;
}

.c2 {
  border-color: darkblue;
}

<div class="container">
  <div class="item3">
    <div class="container column c2">
      <div class="item1 c1"></div>
      <div class="item3"></div>
    </div>
  </div>
  <div class="item1 c1"></div>
  <div class="item2"></div>
</div>

マイケルベンジャミン

質問は言う：

FirefoxとIEで完全に機能する次のレイアウトがあります。残念ながら、Chromeでは壊れています。つまり、親の高さが100％であっても、紺色のコンテナは折りたたまれています。

Actually, an argument could be made that the opposite is true: Chrome has it right, while Firefox and IE are "broken".

First, here's the solution:

.item3 { height: 100%; }

Now let's look at your document structure and the heights applied:

<html> <!-- height: 97% -->
<body> <!-- height: 97% -->
<div class="container"> <!-- height: 100%; -->
    <div class="item3"> <!-- height: ?? -->
        <div class="container column c2"> <!-- height: 100% ; this is the collapsed box -->
                       ...
                       ...
                       ...

As per the CSS specification, when using percentages to set the height of an element (like you are doing with .container), the parent element must also have an explicit height. In reference to your collapsed div, its parent (.item3) does not have a defined height.

From the spec:

<percentage>
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

auto
The height depends on the values of other properties.

In terms of the height property, it would appear from this example that Chrome defines "containing block" as "parent", while Firefox and IE define "containing block" as "ancestor", or they respect flex heights as a reference for percentage heights.

したがって、div紺色の境界線（.container column c2）のあるにはコンテンツがなく、その親には高さが指定されていないため、Chromeでは高さがなく、ボックスが折りたたまれます。

ただし、.item3折りたたまれたボックスの親であるの高さを指定することにより、高さはすべてのブラウザーで機能します。

デモ

更新

詳細：

ChromeとFirefoxでレンダリングが異なる高さ

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-28

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Chromeのネストされたフレックスボックスレイアウトで高さのパーセンテージが機能しない

Chromeのネストされたフレックスボックスレイアウトで高さのパーセンテージが機能しない

ネストされたフレックスボックスでテキストオーバーフローの省略記号が機能しない

ネストされた角度のあるマテリアルレイアウトでフレックスが期待どおりに機能しない

ネストされたフレックスボックスがChromeで機能しないのはなぜですか？

ネストされたコンテナのないデスクトップおよびモバイルフレックスボックスレイアウト

別のクラスからタッチされたときのスウィフトボタンアクションセレクター：認識されないセレクターがインスタンスに送信されました

フレックスボックスの高さのパーセンテージ

レイアウトが難しい要素のフレックスボックスストレッチ高さ

apt-制限されたインターネットアクセスの背後で機能しない

apt-制限されたインターネットアクセスの背後で機能しない

フレックス/グリッドレイアウトがボタンまたはフィールドセット要素で機能しない

ネストされたウィンドウ関数がスノーフレークで機能しない

テキストオーバーフロー：ネストされたフレックスコンテナで省略記号が機能しない

フレックスの角度のあるアイテムは、コンポーネントにした後、高さが固定されていません

ネストされたIFステートメントでPHPリダイレクトが機能しない

Safariが高さを計算しない：ネストされたフレックスボックスで100％

Cisco RV320ルータのファームウェアをアップグレードしましたが、接続されているデバイスがインターネットにアクセスできなくなりました

ネストされたレイアウトでのListViewクリックが機能しないのはなぜですか？

ネストされたフレックスボックス列内のコンテンツのスクロール（動的な高さ）

プラグインがアクティブ化されましたが、デスクトップのワードプレスで機能していません

GoogleクラウドストレージクライアントAPIがパッチで機能しない

エクスポートされたコンポーネントのフレックスレイアウト

ネストされたフレックスボックスとCSSグリッドレイアウトでのスペース分散の問題

ネストされたPreferenceScreenでアクションバーのホームボタンが機能しない

フレックスボックスのブートストラップ4テキストセンターが機能しない

ネストされたスクロールウィンドウ内のスティッキーHTML要素が正しくレンダリングされない

ボットフレームワークのユーザーが選択したボタンのテキストがボットに表示されない

NGXS：ディスパッチされたアクションのテストがofActionDispatchedで機能しない

ネストされたflexboxdivを使用したカレンダーレイアウト-コンテナがスタックしない

React-native：フレックスレイアウトでマージンが考慮されていない