CSS：`min-height: min-content` 不适用于`flex-row`

Question

当父 flex 元素的高度设置为小于 min-height 时，预期的结果应该是元素展开以包含其内容。 这适用于flex-direction:row和min-width: min-content ，但使用字面上相同的代码但使用column而不是row和min-height而不是min-width不会导致父元素扩展而是保留它的原始高度并剪掉它的孩子。

 .flex-row{ display: flex; flex-direction: row; justify-content: space-around; height : 200px; border-style: solid; border-width: 2px; border-color: black; /* Width is set to 100px but because the min-content is 600px, the width overridden. */ min-width: min-content; width: 100px; } .block-row{ align-self: stretch; background-color: red; width: 300px; border: 2px solid blue; } /* Literally same code except flex-col and min-height */ .flex-col{ display: flex; flex-direction: column; justify-content: space-around; min-height: min-content; border-style: solid; border-width: 2px; border-color: black; } .block-col{ align-self: stretch; background-color: red; height: 300px; border: 2px solid blue; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>min-content :(</title> </head> <body> Intended effect works with flex-row min-width <div class="flex-row" style="width: 100px; height : 200px; "> <div class="block-row"></div> <div class="block-row"></div> </div> </br> Doesn't work with same code except min-height :( </br> -> Height is set to 100px, but instead of min-height of children causing height to grow, it is stuck at 100px for some reason. </br> <div class="flex-col" style="height: 100px; width : 200px; "> <div class="block-col"></div> <div class="block-col"></div> </div> </body> </html>

Answer 1

而不是使用 px 使用 vh 允许您使用容器中的 relavite 空间