时间戳

首页 > 解决方案 > CSS：`min-height: min-content` 不适用于 `flex-row`

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

问题描述

当父 flex 元素的高度设置为小于最小高度时，预期结果应该是元素扩展以包含其内容。这适用于flex-direction:rowand 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>

标签： cssflexbox

解决方案

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

推荐阅读