前端 - 给span标签内添加高度auto，但身在同一行相邻列，有一个单元格高度由于多内容撑开了，而另一个却不能一起撑开？

Question

html

<el-row class="row">            <el-col class="col">              <span class="label">上平行度</span>              <span class="value"></span>            </el-col>            <el-col class="col">              <span class="label">平行度OK/NG</span>              <span class="value"></span>            </el-col>          </el-row>

css

 .row {          border-bottom: solid .0625rem #9c9c9c;          display: flex;          align-items: center;          justify-content: center;          .col {            height: 100%;            display: flex;             span:not(:last-child){              border-right: solid .0625rem #9c9c9c;             }            ::v-deep span {              flex: 1;              height: 100%;              word-break: break-all;              word-wrap: break-word;              // font-size: 8px;              height: 23px;              line-height: 23px;            }            .label{              background-color: #e0e0e0;              color: #000000;              font-weight: bold;              height:auto;            }            .value{              height: auto;            }

Answer 1

因为el-col的高度限制了span的高度。row的高度由col计算来的，col的高度由span计算来的，span的高度是auto，所以span的高度由内容决定，上级col的高度没有等高，只是因为align-items: center;居中对齐，首先需要把居中对齐换成align-items: stretch;占满整个容器的高度（align-items默认就是这个值），然后去除col设置的height: 100%;，此时col的高度就变成了和父容器等高。此时可以看到label高度也占满了容器，但是内容少的不有居中，是按照默认属性进行排列的，是下一步就是调整内容居中，方法很多，比如给label设置flex布局display: flex;align-items: center;

Answer 2

你的问题是关于在同一行相邻列中，一个单元格的高度不能随着内容的增多而自动撑开的问题。这种情况通常发生在 flex 布局中，当相邻的元素高度被设置为固定值或百分比，而不是设置为 'flex' 或 'auto'。

在你的代码中，.col 的高度被设置为 100%，这意味着它的高度是其父元素 .row 的高度。而 .row 的高度在默认情况下是自动的，会随着其内容（也就是两个 .col）的增加而增加。因此，当 .col 中的 .label 和 .value 的内容增多时，.col 的高度应该也会增加。

但是，问题可能出在 span 元素的 flex 属性上。在你的 CSS 中，你为 ::v-deep span 设置了 flex: 1;，这会使得每个 span 在 .col 中都尽可能地占据更多的空间。这可能导致 .col 内部的 span 元素（即 .label 和 .value）的高度被限制，即使内容增多也不能增加高度。

一个可能的解决方案是调整 .col 的 flex 属性，让它可以垂直扩展以适应内容。你可以试试以下 CSS：

.row {    /* 其他样式保持不变 */    align-items: stretch;  /* 允许 column 垂直扩展 */}.col {    /* 其他样式保持不变 */    display: flex;    align-items: flex-start; /* 使 column 的内部元素从顶部对齐 */}::v-deep span {    /* 其他样式保持不变 */    flex-grow: 1; /* 使内部元素根据可用空间进行扩展 */}

这样，当 .label 和 .value 的内容增多时，.col 的高度应该能够随之增加。希望这个答案能够解决你的问题。