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

正常现象

使用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>

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
 

html

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

不均分现象

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

解决方式

方式一

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

方式二

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

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

}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

方式三

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126952048