时间戳

首页 > 解决方案 > 使用grid-auto-rows时如何使css网格增长以包含flexbox？

css - 使用grid-auto-rows时如何使css网格增长以包含flexbox？

问题描述

在下面的 codepen 中，您将看到 CSS 网格内部有一个 flexbox。如您所见，flexbox div 的内容在网格的其他部分下溢出。

如果我删除 CSS grid-auto-rows:100px;，那么 flexbox 内容将不再溢出。但是，我真的希望其他 CSS 网格项目的高度为 100 像素，除非它们的内容太高而不能包含在 100 像素内。

如何让所有 CSS 网格项目默认为 100px 高，同时让任何内容高于 100px 的项目增长以容纳所有内容？

* {box-sizing: border-box;}

.wrapper { 
  display: grid; 
  grid-auto-rows: 100px; 
} 

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.box2 { 
  display:flex;
  flex-direction: column;
}

.box2 > div{
  border: 2px solid #ffa999;
  border-radius: 5px;
  background-color: #ffd899;
  padding: 1em;
  color: #d94899;
}
<div class="wrapper">
  <div class="box1">Box 1</div>
  <div class="box2">
    Box 2
    <div class="flex1">Flex One</div>
    <div class="flex2">Flex One</div>
    <div class="flex3">Flex One</div>
    <div class="flex4">Flex One</div>
  </div>
  <div class="box3">Box 3</div>
</div>

标签： cssflexboxcss-grid

解决方案

使用该minmax(min, max)功能。

* {box-sizing: border-box;}

.wrapper { 
  display: grid; 
  grid-auto-rows: minmax(100px, auto); 
} 

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.box2 { 
  display:flex;
  flex-direction: column;
}

.box2 > div{
  border: 2px solid #ffa999;
  border-radius: 5px;
  background-color: #ffd899;
  padding: 1em;
  color: #d94899;
}
<div class="wrapper">
  <div class="box1">Box 1</div>
  <div class="box2">
    Box 2
    <div class="flex1">Flex One</div>
    <div class="flex2">Flex One</div>
    <div class="flex3">Flex One</div>
    <div class="flex4">Flex One</div>
  </div>
  <div class="box3">Box 3</div>
</div>

推荐阅读