0

Angular の flexLayout を使用したい。問題は、柔軟なコンテンツをオーバーフローさせようとすると、オーバーフローしないことです。コンテンツがそのコンテナーよりも大きい場合、そのコンテナーは単純に「過大」になります。

私は解決策を見つけましたが、現時点では内因性および外因性サイジングのサポートは貧弱です.

これがプランカーの例です。min-height私は小道具を試しました：

.detail-row-item{
  // min-height: min-content; //good solution, but poor browser suport
}

クロムで動作しました。結果を実行するための別の解決策はありますmin-height: min-content;か?

編集: この例は、Firefox で正常に動作し、スクリーンショットに示すように、Chrome のみに問題があることがわかりました。 クロム

4

2 に答える 2

0

要素の高さを制限し、divそのコンテンツがサイズからはみ出す場合は、CSSオーバーフロー プロパティを使用して動作を調整できます。したがって、クラス定義にoverflow: auto;またはoverflow: hidden;を追加すると、カードにスクロールバーが表示されるか、オーバーフローしたテキストが非表示になります。.card-wrapper

編集：

と同じ結果を得るにmin-height: min-contentは、要素の flex 属性を削除しdiv.detail-content-wrapper、次のものを設定します。

.detail-content-wrapper {
  max-height: 50%; 
  overflow: auto;
}

変更された plunkerを確認できます。

于 2017-09-22T08:25:24.777 に答える