如何拉伸 li 元素以填充 100% 的父元素 ul？

Question

下面是我需要完全伸展的列表。 但是，左侧没有伸展。 下面是我的源代码：

<div class="rightside" id="rightside">
        <nav>
          <ul>
            <li>History</li>
            <li>Memory Value</li>
          </ul>
        </nav>
        <div class="historymenu" id="historymenu" hidden>
          <ul>
            <li>
              <h3>16 + 4 =</h3>
              <h2>20</h2>
            </li>
            <li>
              <h3>10 + 6 =</h3>
              <h2>16</h2>
            </li>
            <li>
              <h3>5 + 5 =</h3>
              <h2>10</h2>
            </li>
          </ul>
        </div>
        <div class="savetab" id="savetab">
          <ul>
            <li>
              <h2>20</h2>
              <h3>
                <span><button class="btnsave" value="mc">MC</button></span>
                <span><button class="btnsave" value="m+">M+</button></span>
                <span><button class="btnsave" value="m-">M-</button></span>
              </h3>
            </li>
            <li>
              <h2>30</h2>
              <h3>
                <span><button class="btnsave" value="mc">MC</button></span>
                <span><button class="btnsave" value="m+">M+</button></span>
                <span><button class="btnsave" value="m-">M-</button></span>
              </h3>
            </li>
            <li>
              <h2>40</h2>
              <h3>
                <span><button class="btnsave" value="mc">MC</button></span>
                <span><button class="btnsave" value="m+">M+</button></span>
                <span><button class="btnsave" value="m-">M-</button></span>
              </h3>
            </li>
          </ul>
        </div>
      </div>

.rightside {
  border-left: 2px #FF8A00 solid;
  margin-left: 1.2rem;
  color:#FF8A00;
}


.rightside nav li{
  font-size: 1.5rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}


.rightside nav li:hover {
  border-bottom: 2px solid #FF8A00;
}


.rightside nav ul{
  display: flex;
}


.rightside nav li {
  margin: 10px;
}


.historymenu ul li h2,
.historymenu ul li h3,
.savetab ul li h2,
.savetab ul li h3{
  text-align: right;
}

.savetab button {
  background-color: #8EE4AF;
  width: 4rem;
  height: 2rem;
  visibility: hidden;
}


.savetab ul li:hover {
  background-color: rgb(18, 18, 29);
}

.savetab ul li:hover button{
  visibility: visible;
}


.savetab ul{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-grow: 1;
}

.savetab ul li{
  border: 1px solid red;
  width: 100%;

}

Answer 1

请进行如下更改，特别注意所述“使用此”行。

.savetab ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-grow: 1;
  padding: 0; /* Use this */
}

.savetab ul li {
    border: 1px solid red;
    width: 100%;
    border-left: none; /* And this */
}