grid布局 item被内容撑开导致内容划分不等

当item的行列布局（grid-template）由fr划分时，其内容过多会导致item会被内容撑开，item分布不均

<div class="box">
	<div class="item">内容1</div>
	<div class="item">内容2</div>
	<div class="item">内容3</div>
</div>

.box {
	display: grid;
	gap: 10px;
  	grid-template-rows: 1fr 1fr 1fr;
}

解决方案

• item 设置 min-height: 0

  .box {
  	display: grid;
  	gap: 10px;
  	grid-template-rows: 1fr 1fr 1fr;
  }
  .item {
  	min-height: 0;
  }
  

• item 设置 overflow: hidden

  .box {
  	display: grid;
  	gap: 10px;
  	grid-template-rows: 1fr 1fr 1fr;
  }
  .item {
  	overflow: hidden;
  }
  

• 将 fr 改为 minmax(0, 1fr)

  .box {
  	display: grid;
  	gap: 10px;
  	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }