html - 为什么溢出-y：自动不创建滚动？

Question

我正在尝试使用 CSS Flexbox 开发一个网站，带有左侧边栏（固定），并且页面的右侧能够根据内容滚动，但即使在启用overflow-y: auto页面的右侧之后也是如此不滚动

我overflow-y: hidden在正文和overflow-y: auto右侧内容中使用。

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.outside {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-basis: auto;
}

.sidebar {
  flex: 1;
  list-style: none;
  text-decoration: none;
  left: 0;
  width: 20%;
  height: 100vh;
  background-color: #666666;
}

.sidebar header {
  font-size: 1.7rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  background-color: #777777;
  user-select: none;
}

.sidebar ul a {
  height: 100%;
  width: 100%;
  line-height: 4rem;
  font-size: 1.2rem;
  color: white;
  padding-left: 2rem;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(255, 255, 255, .2);
}

ul li:hover a {
  font-weight: bold;
}

.products {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  flex-basis: auto;
  overflow-y: auto;
  overflow-x: auto;
}

.product-card {
  display: flex;
  min-width: 6rem;
  flex-direction: column;
  overflow-y: auto;
  padding: 2%;
  flex: 1 16%;
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.product-image img {
  width: 100%;
}

.product-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

h5 {
  font-weight: 500;
  line-height: 1.7em;
}

h6 {
  color: #666;
  font-size: 14px;
}

<div class="outside">
  <div class="sidebar">
    <header>Apalog</header>
    <ul class="sidebar">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">My Catalog</a></li>
      <li><a href="#">Full Catalog</a></li>
    </ul>
  </div>
  <div class="products">
    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

  </div>
</div>

请帮助我理解这一点，谢谢。

标签： htmlcssflexboxresponsive-designoverflow

Answer 1

您的代码中发生了很多事情，包括重复和不必要的规则。

例如，将.sidebar声明应用于 adiv及其子级ul是不必要的，而且会适得其反。

我清理了一下。

无需固定定位。不需要overflow: hidden在body元素上。

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');

body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-y: hidden;
}

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

.outside {
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: nowrap;  */
  /* flex-basis: auto;  */
  height: 100vh; /* new */
}

.sidebar {
  flex: 1;
  /* list-style: none; */
  text-decoration: none;
  /* left: 0; */
  /* width: 20%; */
  /* height: 100vh; */
  background-color: #666666;
}

.sidebar header {
  font-size: 1.7rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  background-color: #777777;
  user-select: none;
}

.sidebar ul a {
  height: 100%;
  width: 100%;
  line-height: 4rem;
  font-size: 1.2rem;
  color: white;
  padding-left: 2rem;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(255, 255, 255, .2);
}

ul li:hover a {
  font-weight: bold;
}

.products {
  /* flex: 1; */
  display: flex;
  flex-wrap: wrap;
  flex-basis: 80%; /* adjustment */
  overflow-y: auto;
  overflow-x: auto;
}

.product-card {
  display: flex;
  min-width: 6rem;
  flex-direction: column;
  /* overflow-y: auto; */
  padding: 2%;
  /* flex: 1 16%; */
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.product-image img {
  width: 100%;
}

.product-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

h5 {
  font-weight: 500;
  line-height: 1.7em;
}

h6 {
  color: #666;
  font-size: 14px;
}

<div class="outside">
  <div class="sidebar">
    <header>Apalog</header>
    <ul class=""><!-- remove duplicate class -->
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">My Catalog</a></li>
      <li><a href="#">Full Catalog</a></li>
    </ul>
  </div>
  <div class="products">
    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

  </div>
</div>>