javascript - 带滚动的 Div 网格在 flexbox 中不起作用

Question

我用 div 和 flexbox 创建了以下网格，但我遇到了一些问题。 标题(我希望它被修复)与第一行重叠，我似乎无法正确滚动......我该如何解决这个问题？我想过将 overflow-y 滚动条仅放在 gridbody 上，但这会创建一个额外的水平滚动条。

var data = [{
    "title": "Chicken Tortilla Soup!",
    "youTubeId": "B7JUzPTib9A",
    "rating": 0.9708955223880597,
    "views": 73693,
    "thumbnail": "https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
    "length": 265
  },
  {
    "title": "Chicken Pot Pie Soup | Delish",
    "youTubeId": "qAY4oWKY9kg",
    "rating": 0.9782608695652174,
    "views": 6704,
    "thumbnail": "https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
    "length": 65
  },
  {
    "title": "HOMEMADE CHICKEN NOODLE SOUP",
    "youTubeId": "8J4HYnlBU7M",
    "rating": 0.9654550141789121,
    "views": 190886,
    "thumbnail": "https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
    "length": 215
  },
  {
    "title": "3 Easy Homemade Chicken Soup Recipes",
    "youTubeId": "QN6DBEVL0rU",
    "rating": 0.9938524590163934,
    "views": 22353,
    "thumbnail": "https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
    "length": 461
  },
  {
    "title": "Slow Cooker Chicken Noodle Soup",
    "youTubeId": "VgFHbHZDc4I",
    "rating": 0.9736842105263158,
    "views": 4534,
    "thumbnail": "https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
    "length": 97
  },
  {
    "title": "Slow-Cooker Chicken Tortilla Soup | Delish",
    "youTubeId": "Zf858LPRNRc",
    "rating": 1,
    "views": 13645,
    "thumbnail": "https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
    "length": 56
  },
  {
    "title": "Crock Pot Chicken Noodle Soup Recipe",
    "youTubeId": "kpSFAZTvHrc",
    "rating": 0.9675810473815462,
    "views": 40056,
    "thumbnail": "https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
    "length": 363
  },
  {
    "title": "Chicken Tortellini Soup - Lynn's Recipes",
    "youTubeId": "kS6yykyOwUE",
    "rating": 0.9777777777777777,
    "views": 2675,
    "thumbnail": "https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
    "length": 180
  },
  {
    "title": "Chicken Tortilla Soup- Lynn's Recipes",
    "youTubeId": "kJI3bHL3ZW0",
    "rating": 0.9620253164556962,
    "views": 6814,
    "thumbnail": "https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
    "length": 416
  }
];

loadData();

function loadData() {
  $(".gridBody").empty();
  $.each(data, function(index, item) {
    let row = $("<div>", {
      class: "gridRow"
    });
    $.each(item, function(key, value) {
      let cell = $("<div>", {
        class: "gridCell",
        text: value
      });
      $(row).append(cell);
    });
    $(".gridBody").append(row);
  });
}

html,
body {
  height: 100%;
}

#main {
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

.grid {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  height: 80%;
}

.gridHeader {
  height: 100px;
}

.gridBody {
  overflow-y: scroll;
}

.gridHeader,
.gridRow {
  display: flex;
}

.gridHeader .gridCell {
  font-weight: bold;
}

.gridCell {
  border: 1px solid #000;
  min-width: calc(100% / 6);
  padding: 10px;
  word-break: break-word;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="grid">
    <div class="gridHeader">
      <div class="gridCell">Title</div>
      <div class="gridCell">youtubeid</div>
      <div class="gridCell">Rating</div>
      <div class="gridCell">Views</div>
      <div class="gridCell">Thumbnail</div>
      <div class="gridCell">Length</div>
    </div>
    <div class="gridBody">
    </div>
  </div>
</div>

Answer 1

flex 容器的初始设置是 flex-shrink: 1 .这意味着允许 flex 元素收缩以适应容器。这会导致您的 header 比您指定的 height: 100px 短，并导致行重叠。

您需要覆盖此默认设置。试试这个:

.gridHeader {
   height: 100px;
   flex-shrink: 0;
}

或者，甚至更好，

.gridHeader {
   flex: 0 0 100px;
}

(此处有完整解释:What are the differences between flex-basis and width?)

其次，由于垂直滚动条占用了网格体中的空间，它打破了列与固定标题的对齐方式。这是一个棘手的情况。这是一种可能的解决方法:

• alignment issue with html table

var data = [
  {
      "title": "Chicken Tortilla Soup!",
      "youTubeId": "B7JUzPTib9A",
      "rating": 0.9708955223880597,
      "views": 73693,
      "thumbnail": "https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
      "length": 265
    },
    {
      "title": "Chicken Pot Pie Soup | Delish",
      "youTubeId": "qAY4oWKY9kg",
      "rating": 0.9782608695652174,
      "views": 6704,
      "thumbnail": "https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
      "length": 65
    },
    {
      "title": "HOMEMADE CHICKEN NOODLE SOUP",
      "youTubeId": "8J4HYnlBU7M",
      "rating": 0.9654550141789121,
      "views": 190886,
      "thumbnail": "https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
      "length": 215
    },
    {
      "title": "3 Easy Homemade Chicken Soup Recipes",
      "youTubeId": "QN6DBEVL0rU",
      "rating": 0.9938524590163934,
      "views": 22353,
      "thumbnail": "https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
      "length": 461
    },
    {
      "title": "Slow Cooker Chicken Noodle Soup",
      "youTubeId": "VgFHbHZDc4I",
      "rating": 0.9736842105263158,
      "views": 4534,
      "thumbnail": "https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
      "length": 97
    },
    {
      "title": "Slow-Cooker Chicken Tortilla Soup | Delish",
      "youTubeId": "Zf858LPRNRc",
      "rating": 1,
      "views": 13645,
      "thumbnail": "https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
      "length": 56
    },
    {
      "title": "Crock Pot Chicken Noodle Soup Recipe",
      "youTubeId": "kpSFAZTvHrc",
      "rating": 0.9675810473815462,
      "views": 40056,
      "thumbnail": "https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
      "length": 363
    },
    {
      "title": "Chicken Tortellini Soup - Lynn's Recipes",
      "youTubeId": "kS6yykyOwUE",
      "rating": 0.9777777777777777,
      "views": 2675,
      "thumbnail": "https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
      "length": 180
    },
    {
      "title": "Chicken Tortilla Soup- Lynn's Recipes",
      "youTubeId": "kJI3bHL3ZW0",
      "rating": 0.9620253164556962,
      "views": 6814,
      "thumbnail": "https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
      "length": 416
    }
];

loadData();

function loadData() {
  $(".gridBody").empty();
  $.each(data, function(index, item) {
    let row = $("<div>", { class: "gridRow" });
    $.each(item, function(key, value) {
      let cell = $("<div>", { class: "gridCell", text: value });
      $(row).append(cell);
    });
    $(".gridBody").append(row);
  });
}

html, body {
  height: 100%;
}

#main {
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

.grid {
  background-color: #fff; 
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  height: 80%;
}

.gridHeader {
  flex: 0 0 100px;   /* new */
}

.gridBody {
  overflow-y: scroll;
}

.gridHeader, 
.gridRow {
  display: flex;
}

.gridHeader .gridCell {
  font-weight: bold;
}

.gridCell {
  border: 1px solid #000;
  min-width: calc(100% / 6);
  padding: 10px;
  word-break: break-word;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="grid">
    <div class="gridHeader">
      <div class="gridCell">Title</div>
      <div class="gridCell">youtubeid</div>
      <div class="gridCell">Rating</div>
      <div class="gridCell">Views</div>
      <div class="gridCell">Thumbnail</div>
      <div class="gridCell">Length</div>
    </div>
    <div class="gridBody">
    </div>
  </div>
</div>