css根据父高度保持1：1（正方形）的纵横比

Question

我正在尝试制作一个类似日历的显示，其中日期的框是方形的，但整个日历本身不能有任何滚动..

它应该是这样的：

----------------------------------
|         header element         |
|--------------------------------|
|     additional element         |
|--------------------------------|
|       -----------------        | --> start calendar (.box_fit-container)
|       |sun|mon|tue|wed|        |
|       -----------------        |
|       |d1 |d2 |d3 |d4 |        |
|       |d1 |d2 |d3 |d4 |        |
|       |d1 |d2 |d3 |d4 |        | --> bottom of screen/viewport 
|       |d1 |d2 |d3 |d4 |        |     where it usually starts scrolling
|       |d1 |d2 |d3 |d4 |        |
|       -----------------        |
----------------------------------

我设法通过使用来创建外部“框架”，flex以便外部容器填充原始视口的剩余高度，并且由于各种 SO 贡献者，我还可以创建一个单独的方形。但无论出于何种原因，我都无法创建一个正方形，其中对象的宽度跟随其父级的高度。

这些是我到目前为止的代码：

----------------------------------
|         header element         |
|--------------------------------|
|     additional element         |
|--------------------------------|
|       -----------------        | --> start calendar (.box_fit-container)
|       |sun|mon|tue|wed|        |
|       -----------------        |
|       |d1 |d2 |d3 |d4 |        |
|       |d1 |d2 |d3 |d4 |        |
|       |d1 |d2 |d3 |d4 |        | --> bottom of screen/viewport 
|       |d1 |d2 |d3 |d4 |        |     where it usually starts scrolling
|       |d1 |d2 |d3 |d4 |        |
|       -----------------        |
----------------------------------

.box_fit-container {
  display: flex;
  flex-direction: column;
  height: 80vh; /* this was supposed to be 100% according to the SO source I found, but since I'm working on a legacy code and there are other elements above this new one so I changed into 80vh to fit as close as possible */
}
.box_fit-header {
  flex: 0 1 auto;
}
.box_fit-content {
  flex: 1 1 auto;
}
.square-box {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

Answer 1

如果您可以识别标题的高度，或者该高度始终是固定的，您可以max-width考虑80vh - height of header

.box_fit-container {
  display: flex;
  flex-direction: column;
  height: 80vh; /* this was supposed to be 100% according to the SO source I found, but since I'm working on a legacy code and there are other elements above this new one so I changed into 80vh to fit as close as possible */
  border:1px solid;
}
.box_fit-header {
  flex: 0 1 auto;
  border:1px solid red;
}
.box_fit-content {
  flex: 1 1 auto;
  border:1px green;
}
.square-box {
  position: relative;
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  border:2px solid;
}
.square-box:before {
  content:"";
  display:inline-block;
  padding-top: 100%;
}

* {
 box-sizing:border-box;
}

<div class="container">
  <div class="box_fit-container">
    <div class="box_fit-header">
      <div>some header content
    </div>
    <div class="box_fit-content">
      <!-- 
      I need this .square-box elem to be square-shaped 
      but doesn't overflow outside the .box_fit-content 
      -->
      <div class="square-box"></div>
    </div>
  </div>
</div>