css - 左侧 float 列表项的总宽度

Question

在下面的 CSS

@media screen and (max-width: 750px) {
  .flexbox {
    display: block;
  }
  .menu ul {
    padding-right: 7px;
    padding-top: 7px;
    width: 2140px; /* Should not be a fixed calculated number */
  }
  .menu ul > li {
    box-sizing: border-box;
    margin-right: 0;
    margin-top: 0;
    width: 100px;
    float: left;
  }
}

width: 2140px 不应该是一个固定的计算数字，因为它可能不同。

总计

* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: base;
}
#wrapper {
  position: relative;
}
header,
footer {
  position: absolute;
  height: 10%;
  width: 100%;
  background: beige;
}
footer {
  top: 90%;
}
.flexbox {
  display: flex;
  border: 1px solid;
  position: absolute;
  width: 90%;
  left: 5%;
  height: 70%;
  top: 15%;
}
.menu {
  flex: 1;
  overflow-y: auto;
}
.menu ul {
  z-index: 3;
  list-style-type: none;
}
.menu ul > li {
  border: 1px solid black;
  background: height: 70px;
  margin: 7px;
  padding: 7px;
}
main {
  flex: 3;
  border: 1px solid black;
}
@media screen and (max-width: 750px) {
  .flexbox {
    display: block;
  }
  .menu ul {
    padding-right: 7px;
    padding-top: 7px;
    width: 2140px;
    /* Should not be a fixed calculated number */
  }
  .menu ul > li {
    box-sizing: border-box;
    margin-right: 0;
    margin-top: 0;
    width: 100px;
    float: left;
  }
}

<div class="wrapper">
  <header>
  </header>
  <div class="flexbox">
    <aside class="menu">
      <ul>
        <li>
          <section>
            <h3>Section 1</h3>
            <p>Text 1</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 2</h3>
            <p>Text 2</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 3</h3>
            <p>Text 3</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 4</h3>
            <p>Text 4</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 5</h3>
            <p>Text 5</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 6</h3>
            <p>Text 6</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 7</h3>
            <p>Text 7</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 8</h3>
            <p>Text 8</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 9</h3>
            <p>Text 9</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 10</h3>
            <p>Text 10</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 11</h3>
            <p>Text 11</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 12</h3>
            <p>Text 12</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 13</h3>
            <p>Text 13</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 14</h3>
            <p>Text 14</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 15</h3>
            <p>Text 15</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 16</h3>
            <p>Text 16</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 17</h3>
            <p>Text 17</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 18</h3>
            <p>Text 18</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 19</h3>
            <p>Text 19</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 20</h3>
            <p>Text 20</p>
          </section>
        </li>
      </ul>
    </aside>
    <main>
      <h2>Main</h2>
    </main>
  </div>
  <footer>
  </footer>
</div>

我已经测试了 display: inline-block 和其他东西，但没有找到解决方案。

这只能用 CSS 来完成吗？

Answer 1

从 .menu ul>li{ 移除 float:left 并添加 display:table-cell

* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: base;
}
#wrapper {
  position: relative;
}
header,
footer {
  position: absolute;
  height: 10%;
  width: 100%;
  background: beige;
}
footer {
  top: 90%;
}
.flexbox {
  display: flex;
  border: 1px solid;
  position: absolute;
  width: 90%;
  left: 5%;
  height: 70%;
  top: 15%;
}
.menu {
  flex: 1;
  overflow-y: auto;
}
.menu ul {
  z-index: 3;
  list-style-type: none;
}
.menu ul > li {
  border: 1px solid black;
  background: height: 70px;
  margin: 7px;
  padding: 7px;
}
main {
  flex: 3;
  border: 1px solid black;
}
@media screen and (max-width: 750px) {
  .flexbox {
    display: block;
  }
  .menu ul {
    padding-right: 7px;
    padding-top: 7px;
    /* width: 2140px; */
    /* Should not be a fixed calculated number */
  }
  .menu ul > li {
    box-sizing: border-box;
    margin-right: 0;
    margin-top: 0;
    width: 100px;
    /*float: left;*/
    display:table-cell;
  }
}

<div class="wrapper">
  <header>
  </header>
  <div class="flexbox">
    <aside class="menu">
      <ul>
        <li>
          <section>
            <h3>Section 1</h3>
            <p>Text 1</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 2</h3>
            <p>Text 2</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 3</h3>
            <p>Text 3</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 4</h3>
            <p>Text 4</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 5</h3>
            <p>Text 5</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 6</h3>
            <p>Text 6</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 7</h3>
            <p>Text 7</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 8</h3>
            <p>Text 8</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 9</h3>
            <p>Text 9</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 10</h3>
            <p>Text 10</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 11</h3>
            <p>Text 11</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 12</h3>
            <p>Text 12</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 13</h3>
            <p>Text 13</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 14</h3>
            <p>Text 14</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 15</h3>
            <p>Text 15</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 16</h3>
            <p>Text 16</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 17</h3>
            <p>Text 17</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 18</h3>
            <p>Text 18</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 19</h3>
            <p>Text 19</p>
          </section>
        </li>
        <li>
          <section>
            <h3>Section 20</h3>
            <p>Text 20</p>
          </section>
        </li>
      </ul>
    </aside>
    <main>
      <h2>Main</h2>
    </main>
  </div>
  <footer>
  </footer>
</div>