Make display flex grow as much as her parent with x overflow

February 27, 2024

I have a table in my project with many columns, so I need to use x overflow to scroll all its contents. My problem is that below the table, I have a footer that needs to be the same width as the table, and when the table has x overflow "enabled", the footer does not "stretch" to be the same width as the table. See the problem in the gif below

I’m working with angular, so I’m using html and scss:

<body>
    <section class="test-table">
        <table class="test-table__content">
            <thead>
                <tr>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
            </tbody>
        </table>

        <footer>HERE IS MY PROBLEM - THIS FOOTER MUST HAVE THE SAME WIDTH OF THE TABLE</footer> 
    </section>
</body>

.test-table {
    overflow-x: scroll;

    &__content {
        width: 100%;

        & thead th {
            background-color: #FFFFFFB3;
            font-size: 1.1rem;
            color: #39CDDB;
        }

        & tbody {
            & td {
                text-align: center;
                min-width: 6rem;
            }

            & tr:nth-child(even) {
                background-color: #FFFFFFB3;
            }

            & tr:nth-child(odd) {
                background-color: #4D4F5333;

                td {
                    border-right: 1px solid gray;
                }
            }
        }
    }

    footer {
        display: flex;
        flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        background-color: red;
        color: yellow;
    }
}

>Solution :

If you place the footer outside the section tag and adjust the SCSS accordingly you will have the result you need. It also avoids the need to pan the entire page and only the table that is overflowing. Which is better for smaller devices like mobiles.
The footer should be its own node and not nested to maintain HTML semantics.

<section class="test-table">
  <table class="test-table__content">
    <thead>
      <tr>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
      </tr>
    </tbody>
  </table>
</section>
<footer>HERE IS MY PROBLEM - THIS FOOTER MUST HAVE THE SAME WIDTH OF THE TABLE</footer>

.test-table {
  overflow-x: scroll;

  &__content {
    width: 100%;

    & thead th {
      background-color: #ffffffb3;
      font-size: 1.1rem;
      color: #39cddb;
    }

    & tbody {
      & td {
        text-align: center;
        min-width: 6rem;
      }

      & tr:nth-child(even) {
        background-color: #ffffffb3;
      }

      & tr:nth-child(odd) {
        background-color: #4d4f5333;

        td {
          border-right: 1px solid gray;
        }
      }
    }
  }
}
footer {
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: red;
  color: yellow;
}