The issue of a non-functional grid with scroll in a flexbox

Question

The issue of a non-functional grid with scroll in a flexbox

I've encountered a problem while working with the grid layout using divs and flexbox. The header, which I want to be fixed, is overlapping with the first row and I'm struggling to get the scrolling behavior right. How can I address this issue? I thought about applying overflow-y: scroll only to the grid body, but that introduces an extra horizontal scrollbar.

var data = [{
                "title": "Chicken Tortilla Soup!",
                "youTubeId": "B7JUzPTib9A",
                "rating": 0.9708955223880597,
                ...
            }];

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

Title

youtubeid

Rating

Views

Thumbnail

Length

javascript html css flexbox

Answer 1

Answer №1

By default, a flex container has the property flex-shrink: 1, allowing flex items to shrink to fit the container. This might be causing your header to appear shorter than the specified height: 100px, resulting in overlapping rows.

To resolve this issue, you can override the default setting with these solutions:

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

Alternatively, you can use:

.gridHeader {
   flex: 0 0 100px;
}

(For a detailed explanation, refer to Differences between flex-basis and width)

Furthermore, the presence of a vertical scrollbar in the grid body can disrupt column alignment with the fixed header. To address this, consider the following fix:

Fix for alignment issue in 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
    },
    ...
    (Additional data entries)
    ...
];

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>

Answer 2

By default, a flex container has the property flex-shrink: 1, allowing flex items to shrink to fit the container. This might be causing your header to appear shorter than the specified height: 100px, resulting in overlapping rows.

To resolve this issue, you can override the default setting with these solutions:

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

Alternatively, you can use:

.gridHeader {
   flex: 0 0 100px;
}

(For a detailed explanation, refer to Differences between flex-basis and width)

Furthermore, the presence of a vertical scrollbar in the grid body can disrupt column alignment with the fixed header. To address this, consider the following fix:

Fix for alignment issue in 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
    },
    ...
    (Additional data entries)
    ...
];

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>

Answer 3

Answer №2

Make sure to include box-sizing: border-box; in the style for .gridCell. Additionally, consider changing overflow-y: scroll to overflow-y: overlay;. Also, adjust 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
    },
    // Remaining data content...
];

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>

Answer 4

Make sure to include box-sizing: border-box; in the style for .gridCell. Additionally, consider changing overflow-y: scroll to overflow-y: overlay;. Also, adjust 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
    },
    // Remaining data content...
];

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>

The issue of a non-functional grid with scroll in a flexbox

Answer №1

Answer №2

Similar questions

When a decimal of 0.02 is added to a number in javascript, it may lead to

Creating a realistic typewriter effect by incorporating Code Block as the input

Designing stylesheets for larger screens to optimize the layout

Decomposing LocalStorage data in React using JavaScript

Failed to load Gulpfile.js in the Task Runner Explorer of Visual Studio 2019 version 16.6.2

External API data is shown in the browser console but appears as undefined on the page

Tips for adjusting the minimum attribute within an input field with jQuery

I encountered an issue with rendering static images when attempting to package my node-express app with pkg

Tips for submitting an Ajax Form with identical Name attributes?

Manipulating arrays within Vuejs does not trigger a re-render of table rows

What is the process for uploading or hosting a Reactjs website?

There seems to be an issue with the HighCharts chart export feature as it is not showing the Navigator graph

What could be causing the template UI to not display the Vue data?

"Implementing a function where two different elements can change the text of a button

What is the method for extracting an entire space-separated string into a PHP variable from HTML options?

Finding the row index in an Angular material table

The issue with Angular 4 imports not refreshing in a .less file persists

Animation of active chat list items on Whatsapp

Once an email address is entered, kindly instruct the driver to press the tab key twice for navigation

What could be the reason behind the malfunctioning of my three.js lighting system?