Div grid with scroll does not work in flexbox

Question

I have created the following grid with divs and flexbox, but I am having some problems. The header (I want it to be fixed) is overlapping with the first row and I can't seem to get the scrolling right.....How can I fix this? I thought of putting the overflow-y scroll on the gridbody only but that creates an extra horizontal scrollbar.

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>

Michael Benjamin · Answer 1 · 2017-06-24T14:30:08.823

An initial setting on a flex container is flex-shrink: 1. This means that flex items are permitted to shrink in order to fit within the container. That's causing your header to be shorter than your specified height: 100px and resulting in overlapping rows.

You need to override this default setting. Try this:

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

Or, even better,

.gridHeader {
   flex: 0 0 100px;
}

(Full explanation here: What are the differences between flex-basis and width?)

Second, because the vertical scrollbar occupies space in the grid body, it breaks the alignment of columns with the fixed header. This is a tricky situation. Here's one possible fix:

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>

Plus 1 ... and I guess I have to subscribe to the `flex` tag as well to find these questions earlier :) — Asons, Jun 24 '17 at 13:36
@LGSon, I've been trying to fix that problem for a while now: https://meta.stackoverflow.com/q/319516/3597276 — Michael Benjamin, Jun 24 '17 at 13:40
Thank you! I see I still have a lot to learn about flex boxes! — coffeeak, Jun 24 '17 at 14:11
However, I would need to keep the overflow y on the grid body only as I want the headers to be fixed. How can I achieve this in the best way then? — coffeeak, Jun 24 '17 at 14:21

score 0 · Answer 2 · answered Jun 24 '17 at 12:38

Add box-sizing: border-box; to .gridCell. Plus, I would like to turn the overflow-y: scroll to overflow-y: overlay;. Plus, you need to change height: 100px; to min-height: 100px; for the header.

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 {
  min-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;
  box-sizing: border-box;
}

<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>

Div grid with scroll does not work in flexbox

2 Answers2