CSS根据父级维度的比例设置子元素的维度

Question

我试图找出一个只有CSS的解决方案，让方形子元素展开，直到它达到响应父元素的宽度或高度。

因此，如果父亲的身高大于宽度，那么孩子的宽度会受到父亲宽度的限制，如果父亲的身高超过身高，那么孩子的身高就会超过父亲的身高。受到高度的限制。红是孩子：

基本上this（尝试移动垂直分隔符以调整结果窗格的大小）而不使用JS。

由于SO坚持要包含代码，所以这里再次链接小提琴。

＆＃13;

＆＃13;

$(window).resize(onResize);
setTimeout(onResize);	// queue after rendering

var content = $('.content');
var box = $('.box');

function onResize() {
  var w = content.width();
  var h = content.height();

  if (w > h) {  // limit "box" by height
    box.css('width', h + 'px');
    box.css('padding-bottom', h + 'px');
  } else {	// limit "box" by width
    box.css('width', '');
    box.css('padding-bottom', '');
  }
}

＆＃13;

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(30, 30, 30);
}

body > div {
  display: inline-block;
}

.sidebar {
  background-color: rgb(50, 50, 50);
  height: 100%;
  width: 20%;
}

.content {
  background-color: rgb(100, 100, 100);
  position: relative;
  height: 100%;
  width: 80%;
}

.box {
  outline: solid 1px darkred;
  background-color: rgb(120, 120, 120);
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar"></div><!--
--><div class="content">
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据父母的要求，改变孩子的css总是很困难的。 但是你也许可以和＃34; vh＆＃34;和＆＃34; vw＆＃34;在您的情况下，使用窗户的高度或宽度。另一种不太灵活的解决方案是断点。 只使用vh，上面的例子很容易在没有JS的情况下完成。在这里看到它的样子：https://jsfiddle.net/jzsqtcac/

<div class="sidebar"></div><!--
--><div class="content">
  <div class="box"></div>
</div>

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(30, 30, 30);
}

body > div {
  display: inline-block;
}

.sidebar {
  background-color: rgb(50, 50, 50);
  height: 100vh;
  width: 20vw;
}

.content {
  background-color: rgb(100, 100, 100);
  position: relative;
  height: 100vh;
  width: 80vw;
}

.box {
  outline: solid 1px darkred;
  background-color: rgb(120, 120, 120);
  position: absolute;
  width: 100vh;
  padding-bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}