在CSS中创建一个占据容器

Question

我想制作一个方形div，占用容器的剩余大小。我怎么能用CSS做到这一点？

具体地：

1. 使div具有1：1的宽高比（也称为正方形）
2. 制作divs宽度＆amp; height =到空间较小的维度

这是一张清晰明了的图片：



注意： 我知道答案＆amp;使用带padding-bottom: 100%;的容器组件的方法。这不是一个可接受的解决方案，因为它失败＃2（不会根据什么尺寸约束方块而切换）。

无法解决的解决方案

• 只使用flex：https://codepen.io/donpinkus/pen/RjMQEQ
• 使用flex＆amp;宽高比容器：https://codepen.io/donpinkus/pen/bYvLOO

Answer 1

您可以在（calc()）vh / vw之间转发max-和width / height个单位。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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