Question

我有一个CSS问题，我不知道如何解决。情况如下。我有一个<div>，它是一个flex-item，它垂直拉伸，以便填充其flex-container的可用高度。根据浏览器窗口的大小，此<div>是一个矩形，有时比宽度更高，有时比高度宽。

现在我想在这个矩形中放置另一个<div>，它应该是 square 。相对于周围的矩形，它应该尽可能大，但它必须始终完全可见。

创建正方形的典型方法是将padding-bottom设置为百分比值（与宽度相同的百分比值）。这实际上创建了一个正方形，但由于在这种方法中高度始终跟随宽度，如果宽度超过高，它会拉伸出矩形。

如何解决此问题，以便广场始终包含在由flexbox计算的矩形大小的边界内，理想情况下不使用JavaScript？

更新：同时，我使用JavaScript解决了这个问题，但如果有的话，我仍然对纯CSS解决方案感兴趣。

Answer 1

不确定这是否是您正在寻找的...

＆＃13;

<div class="flex">
  <div class="item">
    <div class="square">
      
    </div>
  </div>
  <div class="item">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

一种方法是使用视口单元和媒体查询。

假设：

任意高度的弹性容器，以vh单位设置，
任意宽度的弹力儿童，以vw单位设置，填充其容器的高度

我们可以将内部正方形设置为100％宽度，然后：

给它max-width等于与容器的height相同的数字，但设置为vmin个单位
给它一个max-height等于用于flex子项width的相同数字（方形的直接父级），但设置在vmin个单位

这让我们非常接近，但是当我们的窗户朝向纵向时（即，当它比它宽时），我们留下了一个略呈矩形的内部正方形。

因此，我们可以使用的最后一步是添加一个媒体查询，该广告查询以与广场正方形高度相等的宽度相同的方式启动，并在该查询中将max-height更改为匹配max-width，因此我们的广场不会太高。

诀窍是弄清楚如何设置媒体查询。在下面的例子中，当窗口比较宽时，我们的内部正方形将停止为正方形。所以我们想做一些像

这样的事情

@media all and (max-width: calc(100vh - 1px))

但我们无法在媒体查询中使用calc表达式，媒体查询中的视口单元也会出现问题。所以我们最好的选择是使用JavaScript来检测窗口高度，然后使用适当的媒体查询insert a <style> element进入我们的文档。

下面的代码段可以做到这一点，虽然可以通过更新窗口大小调整上的媒体查询来改进（或者更具体地说，仅在窗口高度发生变化时）。

＆＃13;

function createMediaQuery() {
  var containerHeight = window.innerHeight - 1;
  var mediaQuery = '@media all and (max-width: ' + containerHeight + 'px) { ' +
    '#square { max-height: 70vmin } }'

  var head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = mediaQuery;
  } else {
    style.appendChild(document.createTextNode(mediaQuery));
  }
  head.appendChild(style);
}
createMediaQuery();

＆＃13;

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
.container {
  display: flex;
  height: 70vh;
  margin: 15vh auto;
}
.flex-item {
  background-color: midnightblue;
  width: 80vw;
  margin: 0 auto;
  display: flex;
}
.square {
  background-color: gainsboro;
  width: 100%;
  max-width: 70vmin;
  max-height: 80vmin;
  margin: 0 auto;
}

＆＃13;

<div class="container">
  <div class="flex-item">
    <div class="square"></div>
  </div>
</div>

＆＃13;

在弹性框中划分为方形

2 个答案: