コンテナの残りのスペースを占めるCSSの正方形を作成します。

Question

コンテナの残りのサイズを占める正方形のdivを作成します。私はCSSでこれをどうやって行うことができますか？

具体：

1. DIVを行う1を有する：（正方形別名）1のアスペクト比を
2. は少ないスペース

を有する寸法に&高さ= div要素の幅作ります

ここで、それは明らかに絵だ：

注： 私はpadding-bottom: 100%;とコンテナコンポーネントを使用して答え&方法を知っています。これは＃2で失敗するため許容できる解決策ではありません（どの次元が四角形を制約するかによって切り替わりません）。フレックス&アスペクト比の容器を使用してhttps://codepen.io/donpinkus/pen/RjMQEQ

：ちょうどフレックス使用して

• ：動作しません

  ソリューションはhttps://codepen.io/donpinkus/pen/bYvLOO

Answer 1

あなたがcalc()とvh/vwに中継することができます（max-）width/height。

header { 
 
    background: pink; 
 
    height: 150px; 
 
} 
 
header, .squarred {/* use flex for centering, optionnal */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: ; 
 
} 
 
.squarred { 
 
    width:calc(100vh - 150px);/* luck: header has a fixed height , remove it */ 
 
    max-width:100vw;/* stay within the window */ 
 
    max-height:100vw;/* stay within the window */ 
 
    margin:0 auto; 
 
    flex:1; 
 
    overflow:auto;/* can be usefull */ 
 
    background:turquoise; 
 
} 
 
html,body {/* set the frame */ 
 
    margin:0; 
 
    height:100vh; 
 
    display:flex; 
 
    flex-direction:column; 
 
}

<header><h1>header</h1></header> 
 
<main class="squarred"> 
 
    <div class="buffer"> 
 
    <h2>I am a square</h2> 
 
    <p>I occupy the remaining space</p> 
 
    </div>

https://codepen.io/gc-nomade/full/MOVQWZ/