grid display overflowing flex container, how to prevent overflow?

Question

As shown in the image below, the code renders the grid, but the full grid overflows the width:20% constraint.

Ideally, the grey rectangles shown would squish (even if the text is illegible) so that all 8 grey boxes fit inside the width: 20% and each grey box has the same width.

Why is the grid is overflowing instead of shrinking the contents to fit?

NOTE : If you zoom out, you can see the ENTIRE contents that are cut-off by the flex container.

 div { -webkit-user-select: none; user-select: none; }.align-center { text-align: center; vertical-align: middle; }.btn-no-underline:hover { text-decoration: none;important. }:flex-expand { flex;1 1. }:blue-link { z-index; 1. }:blue-link:hover { stroke; #a6d3f7:important; stroke-width: 10px; z-index. 2: };text-input { border. 0px: }:text-input;hover { border. 1px:important: };editable-content.disabled { background: white; }.hidden { visibility. hidden, }.btn-group-xs >:btn. .btn-xs { padding; :25rem.4rem; font-size: .875rem; line-height: .5; border-radius. :2rem; }.gel-cutLine { width: 5px; }:grey-cutline { width;100%: height; 1px. border-bottom: 1px dashed grey; }:gel-cutLine-show { width; 5px. border-left: 1px dashed red; }:gel-cutLine-right-show { width. 0px; border-right. 0:25px dashed red; }:gel-lane-text{ margin; auto. padding: 0 5%; }:sg-row { display; flex. flex-flow: row; } select.type{ width: 10px; }.form-div{ border: 1px solid #cccccc; }.valid-entry{ background-color: #c9fabe;important. }:full-height { height; 100%: };light-vbar{ margin-top: -1px; border: 1px solid #f2f2f2; border-top: 0; z-index. 1: background-color; #fefefe: };vertical-bar{ margin-top: -1px; border: 1px solid #f2f2f2; border-top: 0; z-index. 1: background-color; #fefefe: };step-item-div{ margin-top: 3px; margin-left: 8px; margin-right: 8px; padding: 3px. border; 1px solid #cccccc: border-radius; 0:25rem; } #inv { margin: 10px; display: flex; flex-flow. row: height; 100%, }:table{ overflow; scroll: } #inv-form; #inv-search{ width. 50%: display; inline-block. } #inv-search{ }:small-margin{ margin; 10px. }:comment-date{ float; right. }:small-padding{ padding; 10px. }:fair-margin{ margin; 20px. }:fair-padding{ padding; 20px: };one-line{ display. flex: flex-flow; row. }:white-background{ background-color; white: };half-split-component{ display. flex: flex-flow; row: };half-split-container{ display: flex; flex-flow. row: height; 100%: };half-container{ margin: 10px; display. flex: flex-flow; row: };sidebar{ width: 3%; display: inline-block; overflow. scroll: height; 100%: };main-pane{ width: 97%; display: inline-block; overflow: scroll; padding. 15px: height; 100%: };third-container{ margin: 10px; display. flex: flex-flow; row: };third{ width: 33%; display: inline-block; overflow. scroll: padding; 15px: };row-component{ display. inline-block: margin;0px: };metadata-container{ width: 45%; display: inline-block; overflow. scroll: padding; 15px: };results-table{ width:100%; display: inline-block; overflow. scroll: padding; 15px: };two-thirds{ width. 67%: display; inline-block: };experiment-list-container{ width: 35%; display: inline-block; overflow. scroll: padding; 15px: };experiment-view-container{ width: 100%; display: inline-block; overflow. scroll: padding; 15px: };quarter-container{ margin:10px; display. flex: flex-flow; row: };quarter{ width: 25%; display. inline-block: overflow; scroll: };button-centered{ z-index: 3; position: absolute; margin-top: -15px; top. 0px: left; 2%: };centered{ text-align. center: margin; auto: };half { width: 50%; display: inline-block; overflow-y: auto; overflow-x. visible: height; 100%: };half-no-scroll{ width: 50%; display: inline-block; padding: 15px; height. 100%: overflow; visible: };half-split-container-component{ width: 50%; display. inline-block: overflow; scroll: };dashboard-preview{ height. 40%: overflow; scroll: };dashboard-preview-full{ height. 100%: overflow; scroll: };active-row{ background-color. #0052e9:important; color. white:important; }:blue{ background-color; blue. }:experiment-data{ margin; 10px: border-style; line: };manual-protocol-item-container{ width: 40%; display: flex; flex-flow: row; background-color: #ebf2f5; margin: 10px; text-align. center: margin; auto: margin-block-end; 10px: };delete-container{ position. absolute: right; 0px: top; 0px. }:protocol-form-item{ display; flex: flex-flow; row: };form-wrapper-container{ width. inherit: display; flex: flex-flow; row. }.form-wrapper{ background-color: #ebf2f5; padding. 10px: };item-form-container{ }.full-height { height: 100%; }:dynamic-text { font-size; 80%. }:image-caption { height; 20px. white-space: nowrap; }:gallery-image-caption-container { border; 1px solid #f3f3f3. }:gallery-group { height; 100%. border: 1px solid gray; }:gallery-image-container { /*height; 100%:*/ };grid-container { display: grid; grid-template-columns. auto 1fr auto: grid-template-rows; auto auto 1fr. border: 1px solid gray; }.no-border { border: unset;important. }:no-border-left { border-left; unset.important: };no-border-top { border-top. unset:important; }:no-border-bottom { border-bottom; unset:important; }:no-border-right { border-right; unset !important; } .grid-item { border: 1px solid grey; font-size: 10px; text-align: center; white-space: nowrap; }

 <div style="width: 20%;"><div class="gallery-group" style="display: flex; flex-direction: column; overflow-y: scroll;"><div style="width: 100%; height: 20px; min-height: 20px;"><div style="position: relative; height: 100%;"></div></div><div class="gallery-image-container" style="position: relative;overflow: visible;width: 100%;"><div class="grid-container" style="height: 100%; resize: both; overflow: hidden;"><div class="grid-item no-border-right no-border-bottom no-border-left no-border-top"></div><div class="grid-item no-border-left no-border-right no-border-bottom no-border-top"><div class="sg-row"><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;">WT</div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;"><br></div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black;padding: 1px;margin: 0px;background: rgb(243, 243, 243);min-width: 0px;max-width: 12.5%;width: 12.5%;"><div style="position: relative;"><div style="height: 100%;/* width: 50%; */"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">A</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">B</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">C</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;">WT</div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;"><br></div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">A</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">B</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">C</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div></div></div><div class="grid-item no-border-left no-border-bottom no-border-top no-border-right"></div><div class="grid-item no-border-right no-border-bottom no-border-left"></div><div class="grid-item dynamic-text no-border-left no-border-right" style="overflow-x: hidden;">7:18 PM February 15, 2021, Gel 3, Lanes 1-10</div><div class="grid-item no-border-left no-border-bottom no-border-right"></div><div class="grid-item no-border-top no-border-bottom no-border-left"><div style="position: relative;"></div><div style="position: relative; top: 100%; transform: translate(0px, -200%);">10 kDa</div></div><img class="unselectable" src="" style="object-fit: contain; width: 100%;"><div class="grid-item no-border-top no-border-bottom no-border-right" style="position: relative;"><div style="position: relative; top: 5%; white-space: nowrap;">P1</div><div style="position: relative; top: 74%; white-space: nowrap;">Actin</div><div style="position: relative; top: 58%; white-space: nowrap;">P3</div></div></div></div><div style="width: 100%; height: 20px; min-height: 20px;"><div style="position: relative; height: 100%;"></div></div><div class="gallery-image-container" style="position: relative; overflow: visible; width: 100%;"><div class="grid-container" style="height: 100%;resize: both;overflow: visible;"><div class="grid-item no-border-right no-border-bottom no-border-left no-border-top"></div><div class="grid-item no-border-left no-border-right no-border-bottom no-border-top"><div class="sg-row"><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;">WT</div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;"><br></div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">A</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">B</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">C</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;">WT</div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;"><br></div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">A</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">B</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div><div style="border-radius: 3px; position: absolute; transform: rotate(90deg); top: -15px; left: -11.5px; min-width: 20px; min-height: 20px;"></div><div style="border: 1px solid black; padding: 1px; margin: 0px; background: rgb(243, 243, 243); min-width: 0px; max-width: 12.5%; width: 12.5%;"><div style="position: relative;"><div style="height: 100%; width: 100%;"><div class="unselectable center-horizontally undefined" style="font-size: 8px; white-space: nowrap; overflow: hidden;"><span>GDF-8<sup>-/-</sup></span></div><div class="unselectable center-horizontally bottom-line " style="font-size: 8px; white-space: nowrap; overflow: hidden;">C</div></div><div style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div></div></div><div class="grid-item no-border-left no-border-bottom no-border-top no-border-right"></div><div class="grid-item no-border-right no-border-bottom no-border-left"></div><div class="grid-item dynamic-text no-border-left no-border-right" style="overflow-x: hidden;">7:18 PM February 15, 2021, Gel 3, Lanes 1-10</div><div class="grid-item no-border-left no-border-bottom no-border-right"></div><div class="grid-item no-border-top no-border-bottom no-border-left"><div style="position: relative;"></div><div style="position: relative; top: 100%; transform: translate(0px, -200%);">10 kDa</div></div><img class="unselectable" src="" style="object-fit: contain; width: 100%;"><div class="grid-item no-border-top no-border-bottom no-border-right" style="position: relative;"><div style="position: relative; top: 5%; white-space: nowrap;">P1</div><div style="position: relative; top: 74%; white-space: nowrap;">Actin</div><div style="position: relative; top: 58%; white-space: nowrap;">P3</div></div></div></div><div><div style="width: 100%; height: 100%; min-height: 20px;"><div style="position: relative; height: 100%;"></div></div></div></div></div>

Answer 1

I think the grid is not the actual issue here.
The cells themselves can't have a smaller width. If you look at the cell content that's highlighted in the screenshot,

it is rendering some text and can't render the contents without overflowing. This is the reason why the cell is wider than expected, thus making all the grid columns overflow.
If you were to force these cells to be smaller (either by hiding the contents on smaller screens, or by making the text overflow, or by breaking the words into individual letters), the grid will fit the desired 20% width of the container.

Here's the behaviour highlighted in a different example (from w3schools ):

Here's a screencast of how to identify this issue in your code example: https://youtu.be/1amrxxwG1_A .

Answer 2

@gion_13 is right, the problem is that the content inside the cells can't go any smaller, thus, the only way to go is to overflow the width of the viewport.

There are multiple ways to fix this: Make the font size dynamic which will require a bit more involvement, nonetheless, it's not difficult. Or change the font-size to a smaller size at the breakpoint the overflow starts happening, or at least 2-3px before, using a media query.

However, I have to ask: Why are you not using a <table> instead? That looks to me like tabular data, thus, the use of a <table> is the way to go.