为什么 overflow-y: auto 不创建滚动条？

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</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</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</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</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</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</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</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</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</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</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</h6>
      </div>
    </div>

  </div>
</div>

请帮我理解一下，谢谢。

Answer 1

为了使您的右侧可以滚动，您应该将 position: fixed 添加到您的左侧导航栏并将 overflow-y: hidden 从您的正文中删除，但是您在 680px screen width 处还有另一个问题导航栏，您应该使用媒体查询使其完全响应。

但在桌面上我认为这就是你想要的。

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

    body {
        font-family: 'Nunito Sans', sans-serif;
        /* I removed from here 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;
        position: fixed; /* added position: fixed */
        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;
    }

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Apalog</title>
            <link rel="stylesheet" href="Style/main.css">
            <script src=""></script>
        </head>
        <body>
    
            <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</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</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</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</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</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</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</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</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</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</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>0</h6>
                        </div>
                    </div>
    
                </div>
            </div>
        </body>
    </html>

此外，您还应该修复 div 产品中的最后一张图片。

Answer 2

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

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

我稍微清理了一下。

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

@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</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</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</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</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</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</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</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</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</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</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</h6>
      </div>
    </div>

  </div>
</div>>

为什么 overflow-y: auto 不创建滚动条？

Why does overflow-y: auto not create scroll?

html

css

overflow

flexbox

responsive-design