无法滚动到其余内容 (CSS)答案

【问题标题】：Cannot scroll to rest of the content (CSS)无法滚动到其余内容 (CSS)
【发布时间】：2021-03-28 04:26:26
【问题描述】：

我的网页开头有一个标题，其背景图像覆盖 100% 的宽度和 100vh。我想在我的页面中为故事部分添加一个不同的部分，这是我的nav之一

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html,body {
  font-family: 'Lato','sans-serif','arial';
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;  

}

.wrapper {
  width: 100%;
  height: 100vh;
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
  background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("img/truck.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;

}

.flex-item {
 padding-top: 15px;
}
.item1 {
  padding-top: 0;
  padding-left: 30px;
}

.logo {
  height: 90px;    
}

.main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;

}

.main-nav a {
  color: white;
  padding: 1rem;
  text-decoration: none;
}

.main-nav a:hover {
  color:orange;
}

.hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.hero a {
  text-decoration: none;
  color: white;
  display: block;
  margin: 10px;

}

.btn {
  background-color: orange;
  border-radius: 50px;

}
/*---------------------------------*/
/*Story Section*/
/*---------------------------------*/

section .flex2 {
  display: flex;
  flex-direction: column;
  color: black;
  height: 100vh;

}

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="Resources/css/styles.css">

    </head>
 <body class="wrapper">

    <header class="flex">
     <div class="flex-item item1">
        <img src="Resources/img/moBurgerzLogo.png" class="logo">   
     </div>
    <nav class="flex-item main-nav">
         <ul>
            <li><a href="#">Our Story</a></li>
             <li><a href="#">Locations</a></li>
             <li><a href="#">Menu</a></li>
             <li><a href="#">Order now</a></li>
        </ul>
    </nav>
    <div class="hero">
        <h2>Best Burgers <br> In DA City(D.C)</h2>
        <a href="#" class="btn" btn-full>Order now!</a>
        <a href="#" class="btn" btn-ghost>View Menu!</a>
    </div>   

    </header>

    <section class="flex-2">
         <div class="flex-item-2">
             <h2>Established in 2017 in D.M.V</h2>
             <p class="story">  founded in 2017 by owner Med.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
         </div>

    </section>

</body>

</html>

元素。但是，我无法滚动查看故事部分中的内容，该部分由弹性容器内的 h2 元素和段落标签组成。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

html,
body {
  font-family: "Lato", "sans-serif", "arial";
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

我想是因为你的字体颜色是白色的

【讨论】：