时间戳

首页 > 解决方案 > 溢出在css网格内表现异常

html - 溢出在css网格内表现异常

问题描述

当我尝试在 CSS 网格的一部分内进行溢出时，我无法让它正常运行。我这里有一支代码笔https://codepen.io/chrisgrim/pen/WNpMeev

我试图让 body div 成为屏幕的正常宽度，并且只有其中的 table div 使用滚动条。相反，整个 body div，包括里面的 second-nav div 都离开了屏幕的一侧。

.grid {
  display: grid;
  grid-template-columns: 4rem auto;
  width:100vw;
}
.body {
  background:red;
  width:100%;
  height:100vh;
}
.second-nav {
  width:100%;
  background:blue;
  height:4rem;
  text-align:right;
  color:white;
}
.table {
  width:100%;
  background:green;
  height:100%;
  overflow:auto;
}
.wide-item {
  width:120rem;
  height:4rem;
  background:purple;
}

标签： htmlcss

解决方案

您必须为表格类提供固定高度才能滚动工作

.body {
  background:red;
}
.grid {
  display: grid;
}
.second-nav {
  width:100%;
  background:blue;
  height:4rem;
  text-align:right;
  color:white;
}
.table {
  background:green;
  overflow:auto;
  height:100px
}
.wide-item {
  background:purple;
}
  <div class="grid">
    <div class="nav">
      <div class="nav-item">
        nav
      </div>
    </div>
    <div class="main">
      <div class="body">
        <div class="second-nav">
          <div class="second-nav-item">second nav</div>
        </div>
        <div class="table">
          <div class="wide-item">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.
          </div>
        </div>
      </div>
    </div>

推荐阅读