网格显示溢出的flex容器，如何防止溢出？

Question

如下图所示，代码渲染了网格，但是整个网格溢出了width:20%约束。

理想情况下，显示的灰色矩形会挤压（即使文本难以辨认），以便所有 8 个灰色框都适合width: 20%并且每个灰色框具有相同的宽度。

为什么网格溢出而不是缩小内容以适应？

注意：如果缩小，您可以看到被 flex 容器截断的全部内容。

 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

我认为网格不是这里的实际问题。
单元格本身不能有更小的宽度。 如果您查看屏幕截图中突出显示的单元格内容，

它正在渲染一些文本，并且无法在不溢出的情况下渲染内容。 这就是单元格比预期宽的原因，从而使所有网格列溢出。
如果您要强制这些单元格变小（通过在较小的屏幕上隐藏内容，或者通过使文本溢出，或者通过将单词分解为单个字母），网格将适合所需的 20% 容器宽度。

这是另一个示例中突出显示的行为（来自w3schools ）：

以下是如何在代码示例中识别此问题的截屏视频： https://youtu.be/1amrxxwG1_A 。

Answer 2

@gion_13 是对的，问题是单元格内的内容不能 go 更小，因此，go 的唯一方法是溢出视口的宽度。

有多种方法可以解决这个问题： 使字体大小动态化，这需要更多的参与，尽管如此，这并不难。 或者在溢出开始发生的断点处将font-size更改为较小的大小，或者至少在 2-3px 之前，使用媒体查询。

但是，我不得不问：您为什么不使用<table>代替？ 这在我看来就像表格数据，因此，使用<table>是 go 的方式。