如何使.container内的summary元素随页面缩小自适应宽度

问题根源 #

你的.lists类设置了width: 100vh，vh是视口高度单位，它的宽度会基于浏览器窗口的高度固定，不会随窗口宽度变化而缩放，这就是容器内的details/summary无法自适应宽度的核心原因。

修复步骤 #

• 将.lists的width: 100vh替换为width: 100%，让它继承父元素main的宽度，随页面宽度自动调整
• 保持details和summary的现有样式，它们本身已经具备自适应能力

修改后的完整代码示例 #

CSS

:root {
  color: #FFFFFF;
  background-color: #0b0b0b;
  overflow-y: scroll;
  overflow-x: hidden;
}

body,
:root {
  margin: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}

main {
  flex-grow: 1;
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
}

a {
  text-decoration: none;
  color: #2ACA7A;
}

a:hover {
  color: #ff0000;
}


/*lists*/
.lists {
  width: 100%; /* 核心修改：替换原width:100vh */
}

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: .5em .5em 0;
  background-color: #222222;
  margin: 15px;
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
}

summary:hover {
  color: #ff0000;
  font-size: 16.2px;
}

details[open] {
  padding: .5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: .5em;
}

th {
  color: #2ACA7A;
}

table {
  width: 86%;
}


/*head*/
header {
  text-align: center;
  max-width: 245px;
  margin-left: auto;
  margin-right: auto;
  font-size: 23px;
}

header>h1 a {
  color: #ff0000;
  font-weight: normal;
}

header>h1 a:hover {
  text-decoration: underline;
}

h2 {
  color: #2ACA7A;
  font-size: 28px;
  font-weight: normal;
}


/*nav*/
nav {
  text-align: center;
  margin-bottom: 50px;
}

nav>ul li {
  display: inline-block;
  border-radius: 9px;
  padding: 7px 21px;
  background-color: #222222;
  max-width: 8em;
}

nav li a:hover {
  color: red;
  border-radius: 10px;
  transition: 0.2s;
}


/* larger screens */
@media (min-width: 1200px) {
  nav {
    top: 200px;
    width: 175px;
    font-size: 19px;
    position: sticky;
    margin-top: 100px;
  }
  nav>ul li {
    display: block;
    text-align: center;
    margin: 18px;
  }
  nav>ul li {
    min-width: 140px;
  }
  main {
    margin-top: -290px;
  }
}


/*footer*/
footer {
  margin-bottom: 20px;
  font-family: arial;
  font-size: 15px;
}

footer>p:nth-of-type(1) {
  font-size: 18px;
  font-weight: 700;
  text-decoration: underline;
}

footer>hr {
  max-width: 900px;
}

footer>p img {
  max-width: 15px;
}

.footer-links-left>*,
.footer-links-right>* {
  display: inline-block;
}

.footer-links-left {
  margin-top: -50px;
}

.footer-links-left a {
  margin: 0px 20px;
}

.footer-links-right {
  margin-left: 400px;
}


/* responsive media*/
@media (max-width: 1550px) {
  main {
    max-width: 980px;
  }
}

@media (max-width: 1475px) {
  main {
    max-width: 900px;
  }
}

@media (max-width: 1287px) {
  main {
    max-width: 860px;
  }
  nav {
    margin-left: -40px;
  }
}

@media (max-width: 1200px) {
  footer>hr {
    max-width: 720px;
  }
  nav {
    margin-bottom: 35px;
  }
}

@media (max-width: 882px) {
  main {
    padding: 0px 20px;
  }
}

@media (max-width: 727px) {
  .footer-links-left a {
    margin: 0 10px;
  }
  .footer-links-left,
  .footer-links-right {
    margin: 0px 20px;
    margin-top: 10px;
  }
  footer>hr {
    max-width: 650px;
  }
}

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <details>
    <summary>content</summary>
    <table>
      <tr>
        <th>Item1</th>
        <th>Item2</th>
        <th>Item3</th>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>

    </table>
  </details>
  <div class="container">
    <header>
      <h1><a href="#">Page</a></h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="#"> </a>Link 1</li>
        <li>
          <a href="#"></a>Link 2</li>
        <li>
          <a href="#"></a>Link 3</li>
      </ul>
    </nav>
    <main>
      <div class="lists">
        <details>
          <summary>content</summary>
          <table>
            <tr>
              <th>Item1</th>
              <th>Item2</th>
              <th>Item3</th>
            </tr>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>

          </table>
        </details>
      </div>
    </main>
    <footer>
      <hr>
      <p>
        <a href="../rss/rss.xml"><img src="../images/rss.svg"></a> Get updates with <a href="../rss/rss.xml">RSS</a> feed!</p>
      <p><b>Updated: July 17, 2022</b></p>
      <div class="footer-links-left">
        <a href="#">link</a>
        <a href="#">link</a>
        <div class="footer-links-right">
          <a href="#">link</a>
          <a href="#">Link</a>
        </div>
      </div>
    </footer>
  </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者poecilotheria