Why is my flex item vertically overflowing its parent? How can I get that flex item height to shrink and grow with the parent?

Asked Apr 26 '19 at 20:37

Active Apr 26 '19 at 20:57

Viewed 31 times

I'm using flex: 1 to try to get the last item in my flexbox to fill the remaining height of the parent. It works on all the divs right up until we get to the table element, which just massively overflows once it gets a lot of content in it. How can I tell the table to fit the height of its container?

.fit-to-screen {

  display: flex;
  flex-direction: column;
  height: calc(100vh - 98px);

  .fit-to-screen-padding {
    padding: 4%;
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;

    .table-container {
      flex: 1;
      height: 100%;

      .table {
        display: flex;
        flex: 1;
        height: 100%;
        flex-direction: column;
        border: 1px solid;
        width: 100%;
        min-width: 445px;
        max-width: 1459px;
    }
  }
}

<div class="fit-to-screen">
  <div class="fit-to-screen-padding">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="table-container">
      <div class="table"></div>
    </div>
  </div>
</div>

edited Apr 26 '19 at 20:57

asked Apr 26 '19 at 20:37

Ryan Sperzel

1

Could you please also provide your HTML? – Jennifer Goncalves Apr 26 '19 at 20:51
@JenniferGoncalves added – Ryan Sperzel Apr 26 '19 at 20:57
1

Try adding `min-height: 0` to `.table-container`. – Michael Benjamin Apr 26 '19 at 20:59
1

The problem is that there's no content. How can we test this and see what you're seeing? – Andy Hoffman Apr 26 '19 at 21:00
@AndyHoffman The table has various items populated through an api call... it gets involved so I'm just trying to provide the minimum amount of code to outline the problem and what I'm trying to accomplish – Ryan Sperzel Apr 26 '19 at 21:04
@Michael_B that worked perfectly. Can you write it in an answer so I can accept it? Also, an explanation would be great if it's not too much trouble! – Ryan Sperzel Apr 26 '19 at 21:06
@RyanSperzel, all in the duplicate. – Michael Benjamin Apr 26 '19 at 21:11

Why is my flex item vertically overflowing its parent? How can I get that flex item height to shrink and grow with the parent?

0 Answers0