Search code examples
cssflexbox

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

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;
}
<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 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 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 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>

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

Solution

  • 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;
}
    <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 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 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 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>