Html Flexbox：flexflow柱；弹性基础100%在没有明确高度的情况下不起作用

我正在为自己建立一个两栏内容布局的网站，其中各栏的纵横比为1:2，我试图避免使用网格，因为我相信Flexbox可以更轻松地处理这些内容。然而，我所有的尝试都是使用

flex-basis:100%强制从左窄列换行到右宽列如果没有为父元素设置明确的、非百分比的高度，则不能工作。我不知道该怎么办。我已经使用并引用了多个问题作为解决方案，但实际上什么都不起作用

我使用的是Firefox72，这应该可以在Firefox的最新版本中使用


：根目录{
--车身宽度：80vw；
--flexbasis:calc（var（--车身宽度）/8）；
--spacebasis:calc（var（--flexbasis）/12）；
--列宽：计算值（var（--bodywidth）/3）；
}
/* https://tobiasahlin.com/blog/flexbox-break-to-new-row/ */
人力资源部休息{
边界：无；
保证金：0；
填充：0；
弹性基准：100%；
柔性生长：1；
}
hr.行.中断{
身高：0；
}
人力资源部上校{
宽度：0；
}
主要{
显示器：flex；
柔性流：柱包裹；
/*高度：100%；/*
grid和mediaquerie是管理从一栏布局到两栏布局的swhitching的好方法

这个想法的演示：


：根目录{
/*这里可能使用var*/
--col1:1fr；
--col2:2fr；
}
主要{
显示：网格；
网格模板列：var（--col1）var（--col2）；
}
主要>*{
边框：实心1px；
保证金：2倍；
}
部分{
网格柱：1；
}
文章{
网格柱：2；
网格行：1/10；
}
/*768px处的断点*/
@媒体屏幕和屏幕（最大宽度：768px）{
主要{
显示器：flex；
柔性流动：柱；
}
main section+section{/*最好使用一个id*/
顺序：1；
}
}

关于
废话废话废话废话废话废话废话废话废话废话废话废话

免责声明
这里有淘气的东西

博客条目
这是一位杰出的预言家，他是一位杰出的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家，他是一位伟大的预言家

我能够找到一个使用javascript的黑客解决方法。这可能是我的用例所独有的，因此我不会将其标记为已接受的答案，但我将在这里发布它，以防任何人需要它用于自己的用途！此黑客使用与上面完全相同的HTML+CSS：

var-timerID=0；
//在调整浏览器窗口大小时，此功能可节省CPU周期和用户健全性！
//它只是在resize事件快速触发时销毁并创建超时
函数resizeDelay（）{
if（timerID）clearTimeout（timerID）；
timerID=setTimeout（重新计算初始值，500）；
}
//这个函数非常神奇！
函数重新计算初始值（mainElts）{
//获取列中元素的计算边距
var margin=parseInt（window.getComputedStyle（mainElts[0]）.marginBottom）*2；
//查找break元素的索引
var指数=0；
而（mainElts[breakIndex].nodeName！=“HR”）breakIndex++；
/*左列的高度等于：
打断前面同级的框底坐标，减去
容器中第一个子节点的箱顶坐标，加上
弹性体中元素的边距宽度乘以打断前的项数
*/
var leftColContentHeight=
mainElts[breakIndex].getBoundingClientRect（）.bottom-
mainElts[0]。getBoundingClientRect（）.top+
保证金*违约指数；
/*右栏的高度等于：
容器中最后一个子节点的框底坐标，减去
打断的以下同级的箱顶坐标，加上
弹性体中元素的边距宽度乘以打断后的项数
*/
var rightColContentHeight=
mainElts[mainElts.length-1].getBoundingClientRect（）.bottom-
mainElts[breakIndex+1].getBoundingClientRect（）.top+
边距*（主长度-1-断裂指数）；
//将两个值中的较大值设置为容器的高度
document.querySelector（“main”）.style.height=
（leftColContentHeight>rightColContentHeight？
leftColContentHeight：
rightColContentHeight）+“px”；
}
//此函数用于根据与打断的关系设置所有对象的宽度
函数bootstrap（）{
//获取容器的所有子级的列表
var mainElts=document.queryselectoral（“main>*”）；
var-pastBreak=false；
//循环遍历节点列表。。。
适用于（缅因州的英语教学）{
//如果循环找到break元素，则设置标志并继续
如果（elt.nodeName==“HR”）{
pastBreak=true；
继续；
}
//如果循环超过了中断，请将宽度设置为宽列，否则设置为窄列
if（passbreak）elt.style.width=“计算（var（--columnwidth）*2）”；
else elt.style.width=“var（--columnwidth）”；
}
//调用实现上述黑客魔法的函数
重新计算初始重量（主ELTS）；
}
//一些事件侦听器
addEventListener（'load'，bootstrap）；
addEventListener（'resize'，resizeDelay）；

注意事项：

我没有在IE或Safari/WebKit中测试过这一点；我已经读过了
Safari/WebKit为
getComputedStyle（）
so报告不同的值
如果您想支持Safari/WebKit，您必须对此进行调整
因此，当我开始测试时，我可能不得不自己做
这是我的fruityPhone和fruityPad上的页面
Firefox和Chrom（e|ium）之间会出现一个小的视觉缺陷。
当
elt.getBoundingClientRect（）时，Firefox不考虑页边距
调用并计算所有数字。色度（e | ium）计算。我选择
适应