背景颜色不适用于溢出网格视口的项目

Question

我正在使用网格创建一个 table，如果列数较少，则应调整 div 的全宽，如果列数较多，则最小宽度和 div 将是可滚动的。现在我面临一个问题，即 parent div of header 项目的背景颜色未应用于视口外的项目。请查找附件中的代码：

.preview-grid {
    display: grid;
    grid-auto-flow: column;
    gap: 2rem;
    grid-auto-columns: minmax(150px, auto);
    width: 100%;
}

.preview-data {
    width: 100%;
}

.table-heading {
  text-align: left;
  font: normal normal normal 2rem/2.3rem Arial;
  letter-spacing: 0px;
  color: #000000CC;
  opacity: 1;
}

.elps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.table-header {
  height: 4.7rem;
  background: transparent linear-gradient(180deg, #B4E1DC 0%, #CEF2EE 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
  align-items: center;
}

<html>
  <head>
    <link rel="stylesheet" href="table-grid.css">
  </head>
  <body>
    <div class="preview-data" style="overflow: auto;">
        <div class="preview-grid table-header">
            <div class="table-heading elps"> test_colum_temp1 </div>
            <div class="table-heading elps"> test_colum_temp2 </div>
            <div class="table-heading elps"> test_colum_temp3 </div>
            <div class="table-heading elps"> test_colum_temp4 </div>
            <div class="table-heading elps"> test_colum_temp5 </div>
            <div class="table-heading elps"> test_colum_temp6 </div>
            <div class="table-heading elps"> test_colum_temp7 </div>
            <div class="table-heading elps"> test_colum_temp8 </div>
            <div class="table-heading elps"> test_colum_temp9 </div>
            <div class="table-heading elps"> test_colum_temp10 </div>
            <div class="table-heading elps"> test_colum_temp11 </div>
        </div>
        <div class="preview-body">
            <div class="preview-grid" >
                <div class="elps"> 103.8134803 </div>
                <div class="elps"> 55.50110531 </div>
                <div class="elps"> 1275.900443 </div>
                <div class="elps"> 0.770877864 </div>
                <div class="elps"> 53.58138228 </div>
                <div class="elps"> 49.07928495 </div>
                <div class="elps"> 0.273326811 </div>
                <div class="elps"> 0.755619823 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 1 </div>
            </div>
            <div class="preview-grid" >
                <div class="elps"> 87.81156167 </div>
                <div class="elps"> 54.55185891 </div>
                <div class="elps"> 825.0793972 </div>
                <div class="elps"> 0.652288275 </div>
                <div class="elps"> 40.14023029 </div>
                <div class="elps"> 49.79152226 </div>
                <div class="elps"> 0.287583079 </div>
                <div class="elps"> 0.559350628 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 2 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 85.56218928 </div>
                <div class="elps"> 58.53817573 </div>
                <div class="elps"> 861.5101623 </div>
                <div class="elps"> 0.362358621 </div>
                <div class="elps"> 46.21407125 </div>
                <div class="elps"> 49.28569363 </div>
                <div class="elps"> 0.293382795 </div>
                <div class="elps"> 0.212992806 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 3 </div>
                <div class="elps"> 1 </div>
                
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 93.17297676 </div>
                <div class="elps"> 49.57534931 </div>
                <div class="elps"> 1070.479512 </div>
                <div class="elps"> 0.910995451 </div>
                <div class="elps"> 43.41520165 </div>
                <div class="elps"> 50.00485976 </div>
                <div class="elps"> 0.236371256 </div>
                <div class="elps"> 0.399526594 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 4 </div>
                <div class="elps"> 1 </div>
                
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 94.70792373 </div>
                <div class="elps"> 50.7626412 </div>
                <div class="elps"> 1243.555551 </div>
                <div class="elps"> 0.742229795 </div>
                <div class="elps"> 51.46288563 </div>
                <div class="elps"> 47.87741733 </div>
                <div class="elps"> 0.269271984 </div>
                <div class="elps"> 0.374426011 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 5 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 88.04868919 </div>
                <div class="elps"> 54.56374166 </div>
                <div class="elps"> 841.2944223 </div>
                <div class="elps"> 0.321906534 </div>
                <div class="elps"> 38.42643344 </div>
                <div class="elps"> 49.29476129 </div>
                <div class="elps"> 0.223401343 </div>
                <div class="elps"> 0.38842411 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 6 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 92.60998811 </div>
                <div class="elps"> 46.53531126 </div>
                <div class="elps"> 2235.557334 </div>
                <div class="elps"> 0.188342999 </div>
                <div class="elps"> 26.91667149 </div>
                <div class="elps"> 48.25744953 </div>
                <div class="elps"> 0.343437097 </div>
                <div class="elps"> 0.569485024 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 7 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 78.39615499 </div>
                <div class="elps"> 56.67733732 </div>
                <div class="elps"> 805.7510368 </div>
                <div class="elps"> 0.779222574 </div>
                <div class="elps"> 42.94484546 </div>
                <div class="elps"> 44.55079579 </div>
                <div class="elps"> 0.36787928 </div>
                <div class="elps"> 0.635523247 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 8 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 95.0224663 </div>
                <div class="elps"> 54.25944705 </div>
                <div class="elps"> 1498.289913 </div>
                <div class="elps"> 0.308294647 </div>
                <div class="elps"> 35.55854993 </div>
                <div class="elps"> 48.29252865 </div>
                <div class="elps"> 0.154294254 </div>
                <div class="elps"> 0.595911594 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 9 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 97.94046788 </div>
                <div class="elps"> 45.11974188 </div>
                <div class="elps"> 610.7545205 </div>
                <div class="elps"> 0.605624034 </div>
                <div class="elps"> 50.86905608 </div>
                <div class="elps"> 49.76304446 </div>
                <div class="elps"> 0.072605217 </div>
                <div class="elps"> 0.285179096 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 10 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 107.3303487 </div>
                <div class="elps"> 53.70729619 </div>
                <div class="elps"> 976.4535808 </div>
                <div class="elps"> 0.381335587 </div>
                <div class="elps"> 36.28893667 </div>
                <div class="elps"> 50.75646912 </div>
                <div class="elps"> 0.271616947 </div>
                <div class="elps"> 0.753091636 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 11 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 100.9132443 </div>
                <div class="elps"> 49.64548674 </div>
                <div class="elps"> 734.1708356 </div>
                <div class="elps"> 0.536329194 </div>
                <div class="elps"> 48.98867712 </div>
                <div class="elps"> 47.88492472 </div>
                <div class="elps"> 0.241992309 </div>
                <div class="elps"> 0.429798513 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 12 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 93.55692806 </div>
                <div class="elps"> 56.76086781 </div>
                <div class="elps"> 1623.144455 </div>
                <div class="elps"> 0.615410711 </div>
                <div class="elps"> 24.34291109 </div>
                <div class="elps"> 48.05278606 </div>
                <div class="elps"> 0.181520639 </div>
                <div class="elps"> 0.498764785 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 13 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 89.30988015 </div>
                <div class="elps"> 53.79946488 </div>
                <div class="elps"> 1297.521637 </div>
                <div class="elps"> 0.397654067 </div>
                <div class="elps"> 28.59050594 </div>
                <div class="elps"> 48.53504178 </div>
                <div class="elps"> 0.296762214 </div>
                <div class="elps"> 0.469156464 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 14 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 95.86570986 </div>
                <div class="elps"> 53.54254346 </div>
                <div class="elps"> 374.7382529 </div>
                <div class="elps"> 0.512612454 </div>
                <div class="elps"> 50.37168029 </div>
                <div class="elps"> 48.06152787 </div>
                <div class="elps"> 0.306293617 </div>
                <div class="elps"> 0.806833733 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 15 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 98.21570032 </div>
                <div class="elps"> 64.2211673 </div>
                <div class="elps"> 1209.986692 </div>
                <div class="elps"> 0.456943868 </div>
                <div class="elps"> 52.86463053 </div>
                <div class="elps"> 51.94558465 </div>
                <div class="elps"> 0.059796339 </div>
                <div class="elps"> 0.489518643 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 16 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 91.83816936 </div>
                <div class="elps"> 49.24932567 </div>
                <div class="elps"> 498.0255175 </div>
                <div class="elps"> 0.615926861 </div>
                <div class="elps"> 44.72080873 </div>
                <div class="elps"> 50.50939571 </div>
                <div class="elps"> 0.218356992 </div>
                <div class="elps"> -0.024030955 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 17 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 88.19244358 </div>
                <div class="elps"> 49.91494967 </div>
                <div class="elps"> 448.9782892 </div>
                <div class="elps"> 0.780493703 </div>
                <div class="elps"> 47.56348714 </div>
                <div class="elps"> 50.05690122 </div>
                <div class="elps"> 0.215392002 </div>
                <div class="elps"> 0.565876439 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 18 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 94.1584902 </div>
                <div class="elps"> 52.82464516 </div>
                <div class="elps"> 1567.446209 </div>
                <div class="elps"> 0.439638349 </div>
                <div class="elps"> 46.4667757 </div>
                <div class="elps"> 48.38126765 </div>
                <div class="elps"> 0.330792071 </div>
                <div class="elps"> 0.453679354 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 19 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 95.8022574 </div>
                <div class="elps"> 65.36720957 </div>
                <div class="elps"> 1559.852703 </div>
                <div class="elps"> 0.462684652 </div>
                <div class="elps"> 50.61895582 </div>
                <div class="elps"> 45.92053786 </div>
                <div class="elps"> 0.308273401 </div>
                <div class="elps"> 0.38869743 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 20 </div>
                <div class="elps"> 1 </div>
            </div>
        </div>
    </div>
  <body>
</html>

Answer 1

只需将 width:fit-content; 设置为 class .table-header :

只有ie不接受：https://developer.mozilla.org/en-US/docs/Web/CSS/width#Browser_compatibility

.preview-grid {
    display: grid;
    grid-auto-flow: column;
    gap: 2rem;
    grid-auto-columns: minmax(150px, auto);
    width: 100%;
}

.preview-data {
    width: 100%;
}

.table-heading {
  text-align: left;
  font: normal normal normal 2rem/2.3rem Arial;
  letter-spacing: 0px;
  color: #000000CC;
  opacity: 1;

}

.elps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.table-header {
  height: 4.7rem;
  background: transparent linear-gradient(180deg, #B4E1DC 0%, #CEF2EE 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
  align-items: center;
  width: fit-content; /* <<<<<<<<<<<<<<<<<<< */
}

<html>
  <head>
    <link rel="stylesheet" href="table-grid.css">
  </head>
  <body>
    <div class="preview-data" style="overflow: auto;">
        <div class="preview-grid table-header">
            <div class="table-heading elps"> test_colum_temp1 </div>
            <div class="table-heading elps"> test_colum_temp2 </div>
            <div class="table-heading elps"> test_colum_temp3 </div>
            <div class="table-heading elps"> test_colum_temp4 </div>
            <div class="table-heading elps"> test_colum_temp5 </div>
            <div class="table-heading elps"> test_colum_temp6 </div>
            <div class="table-heading elps"> test_colum_temp7 </div>
            <div class="table-heading elps"> test_colum_temp8 </div>
            <div class="table-heading elps"> test_colum_temp9 </div>
            <div class="table-heading elps"> test_colum_temp10 </div>
            <div class="table-heading elps"> test_colum_temp11 </div>
        </div>
        <div class="preview-body">
            <div class="preview-grid" >
                <div class="elps"> 103.8134803 </div>
                <div class="elps"> 55.50110531 </div>
                <div class="elps"> 1275.900443 </div>
                <div class="elps"> 0.770877864 </div>
                <div class="elps"> 53.58138228 </div>
                <div class="elps"> 49.07928495 </div>
                <div class="elps"> 0.273326811 </div>
                <div class="elps"> 0.755619823 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 1 </div>
            </div>
            <div class="preview-grid" >
                <div class="elps"> 87.81156167 </div>
                <div class="elps"> 54.55185891 </div>
                <div class="elps"> 825.0793972 </div>
                <div class="elps"> 0.652288275 </div>
                <div class="elps"> 40.14023029 </div>
                <div class="elps"> 49.79152226 </div>
                <div class="elps"> 0.287583079 </div>
                <div class="elps"> 0.559350628 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 2 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 85.56218928 </div>
                <div class="elps"> 58.53817573 </div>
                <div class="elps"> 861.5101623 </div>
                <div class="elps"> 0.362358621 </div>
                <div class="elps"> 46.21407125 </div>
                <div class="elps"> 49.28569363 </div>
                <div class="elps"> 0.293382795 </div>
                <div class="elps"> 0.212992806 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 3 </div>
                <div class="elps"> 1 </div>
                
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 93.17297676 </div>
                <div class="elps"> 49.57534931 </div>
                <div class="elps"> 1070.479512 </div>
                <div class="elps"> 0.910995451 </div>
                <div class="elps"> 43.41520165 </div>
                <div class="elps"> 50.00485976 </div>
                <div class="elps"> 0.236371256 </div>
                <div class="elps"> 0.399526594 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 4 </div>
                <div class="elps"> 1 </div>
                
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 94.70792373 </div>
                <div class="elps"> 50.7626412 </div>
                <div class="elps"> 1243.555551 </div>
                <div class="elps"> 0.742229795 </div>
                <div class="elps"> 51.46288563 </div>
                <div class="elps"> 47.87741733 </div>
                <div class="elps"> 0.269271984 </div>
                <div class="elps"> 0.374426011 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 5 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 88.04868919 </div>
                <div class="elps"> 54.56374166 </div>
                <div class="elps"> 841.2944223 </div>
                <div class="elps"> 0.321906534 </div>
                <div class="elps"> 38.42643344 </div>
                <div class="elps"> 49.29476129 </div>
                <div class="elps"> 0.223401343 </div>
                <div class="elps"> 0.38842411 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 6 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 92.60998811 </div>
                <div class="elps"> 46.53531126 </div>
                <div class="elps"> 2235.557334 </div>
                <div class="elps"> 0.188342999 </div>
                <div class="elps"> 26.91667149 </div>
                <div class="elps"> 48.25744953 </div>
                <div class="elps"> 0.343437097 </div>
                <div class="elps"> 0.569485024 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 7 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 78.39615499 </div>
                <div class="elps"> 56.67733732 </div>
                <div class="elps"> 805.7510368 </div>
                <div class="elps"> 0.779222574 </div>
                <div class="elps"> 42.94484546 </div>
                <div class="elps"> 44.55079579 </div>
                <div class="elps"> 0.36787928 </div>
                <div class="elps"> 0.635523247 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 8 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 95.0224663 </div>
                <div class="elps"> 54.25944705 </div>
                <div class="elps"> 1498.289913 </div>
                <div class="elps"> 0.308294647 </div>
                <div class="elps"> 35.55854993 </div>
                <div class="elps"> 48.29252865 </div>
                <div class="elps"> 0.154294254 </div>
                <div class="elps"> 0.595911594 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 9 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 97.94046788 </div>
                <div class="elps"> 45.11974188 </div>
                <div class="elps"> 610.7545205 </div>
                <div class="elps"> 0.605624034 </div>
                <div class="elps"> 50.86905608 </div>
                <div class="elps"> 49.76304446 </div>
                <div class="elps"> 0.072605217 </div>
                <div class="elps"> 0.285179096 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 10 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 107.3303487 </div>
                <div class="elps"> 53.70729619 </div>
                <div class="elps"> 976.4535808 </div>
                <div class="elps"> 0.381335587 </div>
                <div class="elps"> 36.28893667 </div>
                <div class="elps"> 50.75646912 </div>
                <div class="elps"> 0.271616947 </div>
                <div class="elps"> 0.753091636 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 11 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 100.9132443 </div>
                <div class="elps"> 49.64548674 </div>
                <div class="elps"> 734.1708356 </div>
                <div class="elps"> 0.536329194 </div>
                <div class="elps"> 48.98867712 </div>
                <div class="elps"> 47.88492472 </div>
                <div class="elps"> 0.241992309 </div>
                <div class="elps"> 0.429798513 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 12 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 93.55692806 </div>
                <div class="elps"> 56.76086781 </div>
                <div class="elps"> 1623.144455 </div>
                <div class="elps"> 0.615410711 </div>
                <div class="elps"> 24.34291109 </div>
                <div class="elps"> 48.05278606 </div>
                <div class="elps"> 0.181520639 </div>
                <div class="elps"> 0.498764785 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 13 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 89.30988015 </div>
                <div class="elps"> 53.79946488 </div>
                <div class="elps"> 1297.521637 </div>
                <div class="elps"> 0.397654067 </div>
                <div class="elps"> 28.59050594 </div>
                <div class="elps"> 48.53504178 </div>
                <div class="elps"> 0.296762214 </div>
                <div class="elps"> 0.469156464 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 14 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 95.86570986 </div>
                <div class="elps"> 53.54254346 </div>
                <div class="elps"> 374.7382529 </div>
                <div class="elps"> 0.512612454 </div>
                <div class="elps"> 50.37168029 </div>
                <div class="elps"> 48.06152787 </div>
                <div class="elps"> 0.306293617 </div>
                <div class="elps"> 0.806833733 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 15 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 98.21570032 </div>
                <div class="elps"> 64.2211673 </div>
                <div class="elps"> 1209.986692 </div>
                <div class="elps"> 0.456943868 </div>
                <div class="elps"> 52.86463053 </div>
                <div class="elps"> 51.94558465 </div>
                <div class="elps"> 0.059796339 </div>
                <div class="elps"> 0.489518643 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 16 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 91.83816936 </div>
                <div class="elps"> 49.24932567 </div>
                <div class="elps"> 498.0255175 </div>
                <div class="elps"> 0.615926861 </div>
                <div class="elps"> 44.72080873 </div>
                <div class="elps"> 50.50939571 </div>
                <div class="elps"> 0.218356992 </div>
                <div class="elps"> -0.024030955 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 17 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 88.19244358 </div>
                <div class="elps"> 49.91494967 </div>
                <div class="elps"> 448.9782892 </div>
                <div class="elps"> 0.780493703 </div>
                <div class="elps"> 47.56348714 </div>
                <div class="elps"> 50.05690122 </div>
                <div class="elps"> 0.215392002 </div>
                <div class="elps"> 0.565876439 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 18 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 94.1584902 </div>
                <div class="elps"> 52.82464516 </div>
                <div class="elps"> 1567.446209 </div>
                <div class="elps"> 0.439638349 </div>
                <div class="elps"> 46.4667757 </div>
                <div class="elps"> 48.38126765 </div>
                <div class="elps"> 0.330792071 </div>
                <div class="elps"> 0.453679354 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 19 </div>
                <div class="elps"> 1 </div>
            </div>
            
            <div class="preview-grid" >
                <div class="elps"> 95.8022574 </div>
                <div class="elps"> 65.36720957 </div>
                <div class="elps"> 1559.852703 </div>
                <div class="elps"> 0.462684652 </div>
                <div class="elps"> 50.61895582 </div>
                <div class="elps"> 45.92053786 </div>
                <div class="elps"> 0.308273401 </div>
                <div class="elps"> 0.38869743 </div>
                <div class="elps"> 1 </div>
                <div class="elps"> 20 </div>
                <div class="elps"> 1 </div>
            </div>
        </div>
    </div>
  <body>
</html>

背景颜色不适用于溢出网格视口的项目

Background color not applying to items overflowing grid viewport

html

css

grid

css-grid