CODEWITHSUNDEEP
htmlcss
steel
steel

Reputation: 12520

Flexbox - Make div fill only the remaining space and no more

There are a number of solution-posts available that show you how to fill the remaining space or more with flexbox. However, I want only the remaining screen space filled and no more. If the content exceeds the available space, then I have the option of either hiding it or scrolling.

Fiddle here.

Given the following HTML:

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content-wrapper">
    <div class='content'>
        <p> content</p>
        <p> content</p>
        <!-- Lots more content -->
        <p> content</p>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

I have tried using this CSS, with no luck.

html,
body {
    height: 100%;
    margin: 0
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.header {
    flex: 0 1 auto;
    background: #3366FF;
}

.content-wrapper {
    flex: 1 1 auto;
    background: #F5B800;
}

.footer {
    flex: 0 1 40px;
    background: #FF6633;
}

How can I prevent the flex box from extending with additional content?

Upvotes: 3

Views: 1559

Answers (1)

chowey
chowey

Reputation: 9836

You want to add overflow-y: auto; to the content-wrapper.

.content-wrapper {
    flex: 1 1 auto;
    background: #F5B800;
    overflow-y: auto;
}

Fiddle here.

Upvotes: 7

Related Questions