display: flex，导致子dom宽高失效

 父元素

.parent{width: 100%;height: 100%;display: flex;flex-direction: column;
}

子元素添加flex-shrink: 0

.child {height: 300px;flex-shrink: 0;width: 100%;
}

flex-shrink: 0 是 CSS Flexbox 布局模块中的一个属性，用于控制当 flex 容器中没有足够的空间容纳所有 flex 元素时，该 flex 元素是否以及在何种程度上缩小。 

 详细解释：

当 flex 容器的总宽度（或高度，取决于 flex-direction）小于其内部所有 flex 元素的 flex-basis 之和时，会发生空间不足的情况。此时，浏览器会尝试缩小 flex 元素以适应容器。flex-shrink 属性决定了每个 flex 元素在这个缩小过程中所占的比例。

flex-shrink 属性接受一个数值作为值，该数值表示元素的收缩因子。

• flex-shrink: 0: 这表示该 flex 元素不会缩小。即使 flex 容器的空间不足，该元素也会保持其 flex-basis（或 width/height 如果 flex-basis 为 auto）所定义的大小，可能会导致内容溢出容器。

• flex-shrink: <正数> (默认值为 1): 这表示该 flex 元素可以缩小。缩小的比例与其他可以缩小的 flex 元素以及它们各自的 flex-shrink 值有关。值越大，元素在空间不足时缩小的程度就越大。

工作原理：

当 flex 容器中出现负的可用空间（即所有 flex 元素的 flex-basis 总和大于容器的可用空间）时，浏览器会按照以下步骤计算每个 flex 元素的缩小量：

1. 确定可缩小的元素： 只有 flex-shrink 值大于 0 的 flex 元素才会被考虑缩小。
2. 计算每个元素的收缩量： 每个可缩小元素的收缩量与其 flex-shrink 值和 flex-basis 成正比。更具体地说，每个元素的“收缩权重”是其 flex-shrink 值乘以其 flex-basis。
3. 分配负空间： 总的负可用空间会根据每个元素的收缩权重进行分配。收缩权重越大的元素，会被分配到更多的负空间，从而缩小得更多。