html - grid显示溢出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 .