我对一个公式感兴趣，如果父块的宽度小于我们设置的子块的宽度，则该公式可以计算哪个块应占用父块内的多少空间。
为什么MAIN块的宽度为423px，而ASIDE块的宽度为375px。如果父类减去100px，那么MAIN的宽度已经是393px，ASIDE的宽度是305px。您如何计算块的宽度？
/* Ширина parent 800px */
* {
box-sizing: border-box;
}
body {
width: 1000px;
border: 1px solid red;
height: 600px;
padding: 50px;
}
.parent {
width: 800px;
margin: 0 auto;
border: 1px solid green;
height: 100%;
display: flex;
align-items: start;
}
.aside-block {
width: min(50%, 450px);
border: 1px solid blue;
}
.main-block {
width: max(50%, 450px);
border: 1px solid black;
} <div class="parent">
<div class="aside-block">ASIDE</div>
<div class="main-block">MAIN</div>
<div>
/* Ширина parent 700px */
* {
box-sizing: border-box;
}
body {
width: 1000px;
border: 1px solid red;
height: 600px;
padding: 50px;
}
.parent {
width: 700px;
margin: 0 auto;
border: 1px solid green;
height: 100%;
display: flex;
align-items: start;
}
.aside-block {
width: min(50%, 450px);
border: 1px solid blue;
}
.main-block {
width: max(50%, 450px);
border: 1px solid black;
} <div class="parent">
<div class="aside-block">ASIDE</div>
<div class="main-block">MAIN</div>
<div>
min它们max完全按照预期工作，在第一个示例中，结果是 397px 和 448px。397px 结果是这样的：
448px 类似：
然后我们就可以发挥 Flexbox 的魔力了。由于这两个元素都不适合 798 像素，因此它们会按比例缩小，以便总数为 798 像素（包括所有边框）。
我们计算系数 k = (798px - 4px (四个边框))/(448px + 397px) ≈ 0.9396
乘
PS Firefox 可以直观地显示这些尺寸。