【发布时间】：2020-08-29 12:52:15
【问题描述】：
用例
假设您在 2 个嵌套的 flex 中有几个 <div>（一个用于列，另一个用于行），以获得类似：
您可以在任何方向调整父 <div> 的大小，一切正常。
注意<div> 定义为
{
/* flex: 1 1 0px */
flex-grow: 1
flex-shrink: 1
flex-basis: 0px /* i.e. independant of content */
}
<html>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
}
body {
padding-left: 30px
}
span {
display: block;
margin-top: 30px
}
#dut {
background-color: red;
}
</style>
<body>
<span id="info"></span>
<div style="
background-color: gray;
height: 200px;
width: 50%;
resize: both;
overflow: auto;" onresize="onResize()">
<div style="
height:100%;
display:flex;
flex-direction: column;
">
<div style="
flex: 1 1 0px;
display:flex;
flex-direction: row;
">
<div style="flex: 1 1 0px; background-color: chocolate;"></div>
<div style="flex: 1 1 0px; background-color: gray;"></div>
<div style="flex: 1 1 0px; background-color: chocolate;"></div>
<div style="flex: 1 1 0px; background-color: gray;"></div>
</div>
<div style="
flex: 1 1 0px;
display:flex;
flex-direction: row;
">
<div style="flex: 1 1 0px; background-color: gray;"></div>
<div id="dut" style="flex: 1 1 0px;"></div>
<div style="flex: 1 1 0px; background-color: gray;"></div>
<div style="flex: 1 1 0px; background-color: chocolate;"></div>
</div>
</div>
</div>
<script>
const dut = window.document.getElementById("dut");
const info = window.document.getElementById("info");
const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
new ResizeObserver(cb).observe(dut)
</script>
</body>
</html>我开始困惑的地方......
如果您取一个<div> 元素（标记为“dut”的红色元素），并将其替换为<canvas>，您将得到：
换句话说，红色元素不能在“300x150”这里收缩
我们应该可以用min-height 和min-width 来解决这个问题（早于弹性计算）：
{
background-color: red;
min-width: 0;
min-height: 0;
}
结果：
width 现在是正确的，但为什么不是高度？！
<html>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
}
body {
padding-left: 30px
}
span {
display: block;
margin-top: 30px
}
#dut {
background-color: red;
min-width: 0;
min-height: 0;
}
</style>
<body>
<span id="info"></span>
<div style="
background-color: gray;
height: 200px;
width: 50%;
resize: both;
overflow: auto;" onresize="onResize()">
<div style="
height:100%;
display:flex;
flex-direction: column;
">
<div style="
flex: 1 1 0px;
display:flex;
flex-direction: row;
">
<div style="flex: 1 1 0px; background-color: chocolate;"></div>
<div style="flex: 1 1 0px; background-color: gray;"></div>
<div style="flex: 1 1 0px; background-color: chocolate;"></div>
<div style="flex: 1 1 0px; background-color: gray;"></div>
</div>
<div style="
flex: 1 1 0px;
display:flex;
flex-direction: row;
">
<div style="flex: 1 1 0px; background-color: gray;"></div>
<canvas id="dut" style="flex: 1 1 0px;"></canvas>
<div style="flex: 1 1 0px; background-color: gray;"></div>
<div style="flex: 1 1 0px; background-color: chocolate;"></div>
</div>
</div>
</div>
<script>
const dut = window.document.getElementById("dut");
const info = window.document.getElementById("info");
const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
new ResizeObserver(cb).observe(dut)
</script>
</body>
</html>那为什么？
我正在考虑一堆解决方法（或多或少丑陋），但我的问题更多是关于这种行为的根本原因是什么？那里有另一个 css 标签，例如 min-min-height ?!?
我注意到 min-min-height 在我的情况下等于 150 像素实际上取决于您的浏览器，以及画布的 height 属性 （并且将与 viewBox 属性有关<svg>)
谢谢！！
【问题讨论】：
标签： html css flexbox html5-canvas