Html Question posted in
Some basic documentation can be found here.

Html – How to make flex child item stretch with sibling overflowing item?

I have a flex container, and I am trying to make the footer in it be full width, but when the sibling table overflows, the footer is not following the new width of the container, how to overcome that behaviour?

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  background-color: blue;
}
<div class="container">
  <table>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>
  <div class="footer">
    <button>
      Load more
    </button>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Change width : 100% to min-width:100%.

    .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: center;
  min-width: 100%;
  background-color: blue;
}
    <div class="container">
  <table>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>
  <div class="footer">
    <button>
      Load more
    </button>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Use CSS grid instead and you will get the behavior you want by default:

    .container {
  display: grid;
  align-content: space-between;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: center;
  background-color: blue;
}
    <div class="container">
  <table>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>
  <div class="footer">
    <button>
      Load more
    </button>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Perhaps position: sticky; will be useful:

    .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: blue;
  position: sticky;
  left: 0;
}
    <div class="container">
  <table>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>
  <div class="footer">
    <button>
      Load more
    </button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search