Flexbox线高/填充间距问题

Question

看看这个代码：https://codepen.io/tyrellrummage/pen/zpYgwO

正如您所看到的，当您增加此部分时：

.left li{
  line-height: 4;
}

.right上的flex元素之间的间距也会增加，这是不受欢迎的，如何在不浮动项目或.left和.right容器的情况下修复此问题？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 90%;
  max-width: 85rem;
  margin: 0 auto;
  display: flex;
}

.left li {
  line-height: 4;
}

.left {
  width: 20rem;
  border-right: 1px solid red;
}

.right {
  width: calc(100% - 20rem);
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}

.top {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #f1f1f1;
}

.item {
  width: calc(25% - 2rem);
  margin: 1rem;
}

.item .bottom {
  padding: 1rem;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}

<div class="wrapper">
  <div class="left">
    <ul>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
    </ul>
  </div>
  <div class="right">
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
  </div>
</div>