Fill width of parent div even overflow scroll

Question

I have a table that has another table in each row. I use scroll overflow for the mobile view which makes the rows not fill the maximum available size and has no background when using the scroll table.

I have tried width: fit-content and min-width: 100%, but it doesn't work as well as I want that fill the all available space and each row has equal width.

I want the rows to have the full width of their parent.

.container {
  max-width: 700px;
  margin: 0 auto;
  background: #FFF;
  padding: 1rem;
  border-radius: 1rem;
}

.table1 {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table1__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .5rem;
}

.table1__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table1__body__row {
  border: 1px solid red;
  padding: .5rem;
  border-radius: .25rem;
}

.table1__body__row:not(.table1__body__row:last-child) {
  margin-bottom: 1rem;
}

.table1__body__row__cols {
  display: flex;
  gap: 32px;
}

.table1__body__row__cols>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2 {
  margin-top: .5rem;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table2__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .25rem .5rem;
}

.table2__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2__body__row {
  display: flex;
  gap: 32px;
  border: 1px solid blue;
  padding: .5rem;
  border-radius: .25rem;
}

.table2__body__row>div {
  flex: 1 0 120px;
  min-width: 120px;
}

<div class="container">
  <div class="table1">
    <div class="table1__head">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
    </div>
    <div class="table1__body">
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
        <div class="table2">
          <div class="table2__head">
            <div>item 1</div>
            <div>item 2</div>
            <div>item 3</div>
            <div>item 4</div>
            <div>item 5</div>
            <div>item 6</div>
            <div>item 7</div>
          </div>
          <div class="table2__body">
            <div class="table2__body__row">
              <div>table value item 1</div>
              <div>table value item 2</div>
              <div>table value item 3</div>
              <div>table value item 4</div>
              <div>table value item 5</div>
              <div>table value item 6</div>
              <div>table value item 7</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You may want to add a display: table; to .container.

.container {
  max-width: 700px;
  margin: 0 auto;
  background: #FFF;
  padding: 1rem;
  border-radius: 1rem;
  display: table;
}

.table1 {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table1__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .5rem;
}

.table1__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table1__body__row {
  border: 1px solid red;
  padding: .5rem;
  border-radius: .25rem;
}

.table1__body__row:not(.table1__body__row:last-child) {
  margin-bottom: 1rem;
}

.table1__body__row__cols {
  display: flex;
  gap: 32px;
}

.table1__body__row__cols>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2 {
  margin-top: .5rem;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table2__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .25rem .5rem;
}

.table2__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2__body__row {
  display: flex;
  gap: 32px;
  border: 1px solid blue;
  padding: .5rem;
  border-radius: .25rem;
}

.table2__body__row>div {
  flex: 1 0 120px;
  min-width: 120px;
}

<div class="container">
  <div class="table1">
    <div class="table1__head">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
    </div>
    <div class="table1__body">
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
        <div class="table2">
          <div class="table2__head">
            <div>item 1</div>
            <div>item 2</div>
            <div>item 3</div>
            <div>item 4</div>
            <div>item 5</div>
            <div>item 6</div>
            <div>item 7</div>
          </div>
          <div class="table2__body">
            <div class="table2__body__row">
              <div>table value item 1</div>
              <div>table value item 2</div>
              <div>table value item 3</div>
              <div>table value item 4</div>
              <div>table value item 5</div>
              <div>table value item 6</div>
              <div>table value item 7</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
    </div>
  </div>
</div>