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

【问题标题】：Why does overflow-y: auto not create scroll?为什么溢出-y：自动不创建滚动？
【发布时间】：2020-11-08 19:09:57
【问题描述】：

我正在尝试开发一个网站，使用 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>

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

【问题讨论】：

标签： html css flexbox responsive-design overflow

【解决方案1】：

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

例如，将.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.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>>

【讨论】：

【解决方案2】：

为了让你的右侧可以滚动，你应该将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.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>$100</h6>
                        </div>
                    </div>
    
                </div>
            </div>
        </body>
    </html>

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

【讨论】：