当我在控制台中找不到任何样式的差异时，Chrome和Firefox会有不同的输出？

Question

这是一个JSFiddle of the layout.我看过.showcase元素的样式和Firefox和Chrome控制台中的一个.icon元素，我看不出任何差异。然而，两行小型.icon盒之间的差距在两种浏览器中都是不同的。我暂时只能以320 x 480的分辨率工作。我知道截图中的窗口不完全相同，但是当它们都是320 x 480px时就是这种情况。

如果有人知道原因我会很感激帮助！

    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* End of CSS Reset*/
    
    body, html {
    	height : 100%;
    }
    
    .heading-wrapper {
     	height : 10%;
     	text-align : center;
     	font-size : 12px;
    }
    
    .non-heading-wrapper {
    	display : flex;
      	flex-flow : row nowrap;
      	align-items : center;
     	height : 90%;
      	width : 100%;
    }
    
    .icon-select-outer {
      	display : flex;
      	flex-flow : row nowrap;
     	 height : 95%;
     	 width : 95%;
     	 margin : 0 17px 17px;
     	 background-color : yellow;
    }
    
    .icon-select-inner {
     	display : flex;
    	flex-flow : column nowrap;
     	justify-content : space-between;
     	margin : 0 17px 17px;
     	height : calc(100% - 17px);
     	width : 100%;
    }
    
    .select-text {
    	text-align : center;
    	height : 10%;
    	font-size : 12px;
    }
    
    .icon-preview {
     	height : 40%;
     	width : 100%;
     	background-color :blue;
    }
    
    .icon-showcase {
     	display : flex;
     	flex-flow : row wrap;
     	justify-content : space-between;
     	align-items : flex-start;
     	height : auto;
     	max-height : 200px;
     	width : 100%;
    }
    
    .icon {
     	margin : 2%;
     	flex : 0 1 20%;
     	display : block;
     	min-width : 0;
     	max-width : 25%;
     	min-height : 0;
     	height : auto;
     	object-fit : contain;
    }
    
    .left-edge {
     	margin-left : 0;
    }
    
    .right-edge {
     	margin-right : 0;
    }
    
    .confirm-btn {
     	height : 15%;
    }

<!DOCTYPE html>
<html>

<head>
  <title>Brad's Tic Tac Toe</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" type="text/css" href="screen1-2.css">
  <!--<script src="https://use.fontawesome.com/dee45a8958.js" > </script>-->
  <script type="text/javascript" src="screen1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="heading-wrapper">
    <h1>MAIN TITLE</h1>
  </div>
  <div class="non-heading-wrapper">
    <div class="icon-select-outer">
      <div class="icon-select-inner">
        <div class="select-text">
          <h2>SELECT YOUR ICON</h2>
        </div>
        <div class="icon-preview"></div>
        <div class="icon-showcase">
          <img class="icon left-edge" src="http://via.placeholder.com/100x100">
          <img class="icon" src="http://via.placeholder.com/100x100">
          <img class="icon" src="http://via.placeholder.com/100x100">
          <img class="icon right-edge" src="http://via.placeholder.com/100x100">
          <img class="icon left-edge" src="http://via.placeholder.com/100x100">
          <img class="icon" src="http://via.placeholder.com/100x100">
          <img class="icon" src="http://via.placeholder.com/100x100">
          <img class="icon right-edge" src="http://via.placeholder.com/100x100">
        </div>
        <button class="confirm-btn">CONFIRM</button>
      </div>
    </div>
  </div>
</body>

</html>

Firefox screenshot

Chrome screenshot