使宽度与CSS中的高度成正比

Question

我有以下jsfiddle，该文本的一侧可以是任意长度，然后另一侧有一个框。由于文本可以是任意长度，因此.container的高度是未知的。

我试图弄清楚如果高度始终为.box-container的100％，如何使.container始终为正方形。

我知道padding-bottom:100%的窍门，但这仅是在您知道宽度且高度不重要的情况下。我不知道宽度（也不关心它是什么），但是我知道高度将是容器的100％。我只需要以某种方式将宽度调整为始终等于框的高度的宽度，然后调整.text-container使其不重叠。

简而言之：我需要.box-container来使 ALWAYS 成为平方比，而且 ALWAYS 的高度必须为.container

我希望这是有道理的。任何指导将不胜感激。

HTML

<div class="container">

    <div class="text-container">
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
    </div>

    <div class="box-container">

    </div>

</div>

CSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container { border-radius:3px;box-shadow: 0px 4px 8px rgba(130, 130, 130, 0.25);position:relative; }

.text-container { overflow:hidden;padding:25px;width:70% }

.box-container { position:absolute;right:0;top:0;width:30%;height:100%;background-color:#F9F9F9;padding:20px;}

Answer 1

仅靠CSS不能做到这一点！使用以下jQuery代码：

var boxContainerH = $('.box-container').height();
$('.box-container').width(boxContainerH);

https://jsfiddle.net/4eob6fty/51/