cssgrid布局子元素被撑开导致没有按比例均分

正常现象

使用grid布局使得左右两边的元素均分，实现效果

css

<style>
   .container {
     height: 500px;
     background-color: aliceblue;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* 方式一： */
     /* grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); */
   }

   .item {
     border: 1px solid #d0d0d0;
     padding: 10px;
     box-sizing: border-box;
     color: #fff;
     line-height: 478px;

     /* 方式二： */
     /* min-width:0 */

     /* 方式三： */
     /* overflow: hidden; */
   }

   .inner {
     height: 100%;
     overflow-y: auto;
     font-size: 80px;
     text-align: center;
     background-color: green;
   }

   .inner--overflow {
     width: 1000px;
   }
 </style>

html

<div class="container">
	<div class="item">
	     <div class="inner">1</div>
	   </div>
	
	   <div class="item">
	     <div class="inner">2</div>
	   </div>
 </div>

不均分现象

不过，出现了一个问题，当其中一个元素内部的宽度比较大时，会出现不均分的现象

    <div class="container">
      <div class="item">
        <div class="inner">1</div>
      </div>

      <div class="item">
      	<!-- 增加一个宽度 -->
        <div class="inner inner--overflow">2</div>
      </div>
    </div>

解决方式

方式一

.container {
   height: 500px;
   background-color: aliceblue;
   display: grid;
   /* 方式一： */
   /* grid-template-columns: repeat(2, 1fr); */
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }

方式二

.item {
        border: 1px solid #d0d0d0;
        padding: 10px;
        box-sizing: border-box;
        color: #fff;
        line-height: 478px;

        /* 方式二： */
        min-width:0

}

方式三

.item {
        border: 1px solid #d0d0d0;
        padding: 10px;
        box-sizing: border-box;
        color: #fff;
        line-height: 478px;

        /* 方式三： */
        overflow: hidden;
}

参考
解决 grid 布局 item 被子元素撑开的问题

这篇好文章是转载于：学新通技术网