我有一个包装器<div>，其中包含另外两个<div>标签：一个用于内容，另一个用于侧边栏。 Here is a jsfiddle（简化方案）。
内容实际上只是用户单击的背景图像，并且需要一些JS代码。
HTML代码是在运行时通过PHP脚本生成的，但是我不知道包装的宽度。但是，我需要保持背景图像的宽高比，因此我的主要内容<div>必须使用带有百分比值的padding-bottom。包装程序将使用flex模型，以防万一。
问题是我希望边栏与主要内容height <div>具有相同的padding-bottom像素，但是我不知道那个高度，只有浏览器知道，因为它是容器width的百分比，我对此无能为力。
在jsfiddle示例中，我已将边栏的min-height和max-height手动设置为正确的像素值，因为在该示例中，我确实知道容器的宽度，但实际上在不知道包装宽度的情况下，我需要相同的结果。
我尝试将侧边栏min-height和max-height的属性设置为100％（据我所知，是容器的属性），但这是行不通的。
使用表格作为布局绝对是不可能的，我最好避免使用JS骇客，而且我还没有找到其他解决方案。
是否有纯HTML + CSS解决方案？