网格全宽上的边框

Question

我有网格：

body {
display: block;
margin: 8px;
}
.GridTable {
position: relative;
display: flex;
width: auto;
flex-direction: column;
}
.TableRows {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
}
.TableRow {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
border-bottom:2px solid black
}
.TableHeader {
position: relative;
/* width: 100%; */
display: flex;
flex-direction: row;
}
.headerItem {
flex: none;
width: 200px;
min-height: 100px;
height: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all
}

<div class="GridTable">
<div class="TableHeader">
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>

</div>
<div class="TableRows">
<div class="TableRow">
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
// many others column values
</div>
<div class="TableRow">
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
// many others column values
</div>
</div>
</div>

网格包含许多列，其值=>是不适合100%的屏幕大小，因为它可以向左/向右滚动(因此宽度：自动(

但是，当我将border-bottom: 2px solid white添加到TableRow类时，边框的宽度只有屏幕大小的100%，行的其他部分没有边框。

如何添加位于整个TableRow下方的边框，而不仅仅是屏幕大小的前100%？

谢谢你的帮助！

Answer 1

好吧，滚动的是HTML，而不是网格；(。

你的东西溢出了100%可用宽度的块状容器。

我看到了一些选择，让他们比父母长得更宽。

• 将父级转换为inline-flex容器

body {
display: block;
margin: 8px;
}
.GridTable {
position: relative;
display: inline-flex;
flex-direction: column;
}
.TableRows {
position: relative;

display: flex;
flex-direction: column;
}
.TableRow {
position: relative;
display: flex;
flex-direction: row;
border-bottom: 2px solid black
}
.TableHeader {
position: relative;
display: flex;
flex-direction: row;
}
.headerItem {
flex: none;
width: 200px;
min-height: 100px;
height: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all
}

<div class="GridTable">
<div class="TableHeader">
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
</div>
<div class="TableRows">
<div class="TableRow">
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
// many others column values
</div>
<div class="TableRow">
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
// many others column values
</div>
</div>
</div>

• 使用min-width:min-content

body {
display: block;
margin: 8px;
}
.GridTable {
position: relative;
display: flex;
flex-direction: column;
/* here min-width:min-content; or next child container */
}
.TableRows {
position: relative;
display: flex;
min-width:min-content;/* here */
flex-direction: column;
}
.TableRow {/* not here since it has more than a single child */
position: relative;
display: flex;
flex-direction: row;
border-bottom: 2px solid black
}
.TableHeader {
position: relative;
display: flex;
flex-direction: row;
}
.headerItem {
flex: none;
width: 200px;
min-height: 100px;
height: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all
}

<div class="GridTable">
<div class="TableHeader">
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
</div>
<div class="TableRows">
<div class="TableRow">
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
// many others column values
</div>
<div class="TableRow">
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
// many others column values
</div>
</div>
</div>

• ，甚至使主容器成为表布局容器，这样它将从所包含的内容中增长

body {
display: block;
margin: 8px;
}
.GridTable {
position: relative;
display:table;
}
.TableRows {
position: relative;      
display: flex;
flex-direction: column;
}
.TableRow {
position: relative;
display: flex;
flex-direction: row;
border-bottom: 2px solid black
}
.TableHeader {
position: relative;
display: flex;
flex-direction: row;
}
.headerItem {
flex: none;
width: 200px;
min-height: 100px;
height: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all
}

<div class="GridTable">
<div class="TableHeader">
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
<div class="headerItem">time1</div>
</div>
<div class="TableRows">
<div class="TableRow">
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
<div class="headerItem">time2</div>
// many others column values
</div>
<div class="TableRow">
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
<div class="headerItem">time</div>
// many others column values
</div>
</div>
</div>

应该有更多关于内联块/网格/柔性行为和最小宽度的答案；(