2023年6月29日 00:03:16go评论69阅读模式

英文:

flex row should be as wide as its children in an overflow-x container

问题

以下是已翻译的内容：

.flex-table {
  border: 1px solid #ccc;
  overflow-x: scroll;
}
.flex-table .headers {
  position: sticky;
  z-index: 20;
  background: #ccc;
  top: -2rem;
}
.flex-table .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.flex-table .row .cell {
  flex-grow: 1;
  margin: 0.25rem;
  border-right: 1px solid #ccc;
  flex: none;
  width: 5rem;
}
.flex-table .row .cell:last-child {
  border-right: none;
}

<div class="flex-table">
  <div class="headers">
    <div class="row">
      <div class="cell">#</div>
      <div class="cell">--</div>
      <div class="cell">Item</div>
      <div class="cell">con</div>
      <div class="cell">qt</div>
      <div class="cell">cos</div>
      <div class="cell">pric</div>
      <div class="cell">GP (unit)</div>
      <div class="cell">Profit</div>
      <div class="cell">QOH</div>
      <div class="cell">ATS</div>
      <div class="cell">SO</div>
      <div class="cell">PO</div>
      <div class="cell">Sourcing Notes</div>
      <div class="cell">dev</div>
    </div>
  </div>
  <div class="bod">
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <!-- 其余行的代码已省略 -->
  </div>
</div>

希望这对您有所帮助。

英文:

In the following example you will see my attempt at making a flex box table responsive however i cant get the rows to be 100% of the available scroll space. Note the header background when scrolling.

.flex-table {
border: 1px solid #ccc;
overflow-x: scroll;
}
.flex-table .headers {
position: sticky;
z-index: 20;
background: #ccc;
top: -2rem;
}
.flex-table .row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ccc;
width: 100%;
}
.flex-table .row .cell {
flex-grow: 1;
margin: 0.25rem;
border-right: 1px solid #ccc;
flex: none;
width: 5rem;
}
.flex-table .row .cell:last-child {
border-right: none;
}

&lt;div class=&quot;flex-table&quot;&gt;
&lt;div class=&quot;headers&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;#&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Item&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;con&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;qt&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;cos&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;pric&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;GP (unit)&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Profit&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;QOH&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;ATS&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;SO&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;PO&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Sourcing Notes&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;dev&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;bod&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

How can I make this layout responsive so the header bg appears as expected.

答案1

得分: 1

在您的情况下，最简单的方法是提供一个.flex-table { display: grid; }。但我仍然建议您使用表格来显示表格数据...

.flex-table {
  display: grid;
  border: 1px solid #ccc;
  overflow-x: scroll;
}
.flex-table .headers {
  position: sticky;
  z-index: 20;
  background: #ccc;
  top: -2rem;
}
.flex-table .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.flex-table .row .cell {
  flex-grow: 1;
  margin: 0.25rem;
  border-right: 1px solid #ccc;
  flex: none;
  width: 5rem;
}
.flex-table .row .cell:last-child {
  border-right: none;
}

<div class="flex-table">
  <div class="headers">
    <div class="row">
      <div class="cell">#</div>
      <div class="cell">--</div>
      <div class="cell">Item</div>
      <div class="cell">con</div>
      <div class="cell">qt</div>
      <div class="cell">cos</div>
      <div class="cell">pric</div>
      <div class="cell">GP (unit)</div>
      <div class="cell">Profit</div>
      <div class="cell">QOH</div>
      <div class="cell">ATS</div>
      <div class="cell">SO</div>
      <div class="cell">PO</div>
      <div class="cell">Sourcing Notes</div>
      <div class="cell">dev</div>
    </div>
  </div>
  <div class="bod">
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <!-- 其他行的代码 -->
  </div>
</div>

英文:

The easiest thing to do in your case is to provide a .flex-table { display: grid; }.
But I still advise you to use a table to display tabular data...

.flex-table {
display: grid; /* &#128072; */
border: 1px solid #ccc;
overflow-x: scroll;
}
.flex-table .headers {
position: sticky;
z-index: 20;
background: #ccc;
top: -2rem;
}
.flex-table .row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ccc;
width: 100%;
}
.flex-table .row .cell {
flex-grow: 1;
margin: 0.25rem;
border-right: 1px solid #ccc;
flex: none;
width: 5rem;
}
.flex-table .row .cell:last-child {
border-right: none;
}

&lt;div class=&quot;flex-table&quot;&gt;
&lt;div class=&quot;headers&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;#&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Item&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;con&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;qt&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;cos&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;pric&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;GP (unit)&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Profit&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;QOH&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;ATS&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;SO&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;PO&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Sourcing Notes&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;dev&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;bod&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

答案2

得分: 0

考虑将 width: max-content 应用于 .headers 和 .bod 元素，以确保其宽度与其子元素一样宽：

.flex-table {
  border: 1px solid #ccc;
  overflow-x: scroll;
}
.flex-table .headers {
  position: sticky;
  z-index: 20;
  background: #ccc;
  top: -2rem;
}
.flex-table :is(.headers, .bod) {
  width: max-content;
}
.flex-table .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.flex-table .row .cell {
  flex-grow: 1;
  margin: 0.25rem;
  border-right: 1px solid #ccc;
  flex: none;
  width: 5rem;
}
.flex-table .row .cell:last-child {
  border-right: none;
}

<div class="flex-table">
  <div class="headers">
    <div class="row">
      <div class="cell">#</div>
      <div class="cell">--</div>
      <div class="cell">Item</div>
      <div class="cell">con</div>
      <div class="cell">qt</div>
      <div class="cell">cos</div>
      <div class="cell">pric</div>
      <div class="cell">GP (unit)</div>
      <div class="cell">Profit</div>
      <div class="cell">QOH</div>
      <div class="cell">ATS</div>
      <div class="cell">SO</div>
      <div class="cell">PO</div>
      <div class="cell">Sourcing Notes</div>
      <div class="cell">dev</div>
    </div>
  </div>
  <div class="bod">
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <!-- 以下省略了其他行的内容 -->
  </div>
</div>

这是你提供的 CSS 和 HTML 代码的翻译部分。

英文:

Consider applying width: max-content to the .headers and .bod elements to ensure the width is as wide as its children:

.flex-table {
border: 1px solid #ccc;
overflow-x: scroll;
}
.flex-table .headers {
position: sticky;
z-index: 20;
background: #ccc;
top: -2rem;
}
.flex-table :is(.headers,.bod) {
width: max-content;
}
.flex-table .row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ccc;
width: 100%;
}
.flex-table .row .cell {
flex-grow: 1;
margin: 0.25rem;
border-right: 1px solid #ccc;
flex: none;
width: 5rem;
}
.flex-table .row .cell:last-child {
border-right: none;
}

&lt;div class=&quot;flex-table&quot;&gt;
&lt;div class=&quot;headers&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;#&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Item&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;con&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;qt&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;cos&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;pric&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;GP (unit)&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Profit&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;QOH&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;ATS&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;SO&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;PO&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;Sourcing Notes&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;dev&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;bod&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;div class=&quot;cell&quot;&gt;--&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

flex行应与其子元素一样宽，放在一个overflow-x容器中。

问题

答案1

答案2

在 `display: flex` 父元素中固定子元素

定义一个使用StencilJS的div的宽度和背景颜色。

动态导入 Vite 的 CSS

如何去除两个之间的间隙

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论