ブートストラップ-4高さ100、オーバーフローの内容

Question

これは別のブートストラップh-100質問ですが、それはいくらか複雑です。

目標は、3つの列を含む背景イメージを持つブートストラップコンテナを持つことです。左と中の色は背景色のセットを持ち、常にコンテナの高さに合わせてください。中央の列にはテキストが含まれています（小さな画面では拡大し、ビューポートの高さを超えます）。すべてのコンテナは、ビューポートの高さに合わせる必要があります。

私はここで例を作成しました：https://www.codeply.com/go/2iMM4dthOK

を現在、私はラップトップ・ビューポートでの良い結果につながるbody{min-height: 100%}を使用しています。しかし、デスクトップビューポートに切り替えると、コンテナがビューポートに合わないことがわかります。 body{height: 100%}という解決策があります。はい、解決しました！いいえ、まだです。ラップトップビューポートを元の状態に戻すと、コンテナが中央の列の内容で拡大しないことがわかります。

CSSマジシャンがお手伝いできますか？

明らかに、ビューポートは問題を観察するために一定の高さを必要とします。私は現在デスクトップでテスト中です：1440x780とラップトップ：1200x780の解像度。

Answer 1

削除H-100すべてDIVから、表示を追加： そうhttps://www.codeply.com/go/EtfQ4Jaxmrよう

css: 
.equal{ 
display:flex; 
} 
html: 
<div class="container-fluid"> 
     <div class="row equal"> 
      <div class="col-sm-3 col-left"> 
       col1 
      </div> 
      <div class="col-sm-3 col-middle"> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
      </div> 
      <div class="col-sm-6 col-right"> 
       col3 
      </div> 
     </div> 
    </div>