CODEWITHSUNDEEP
css
nutrina
nutrina

Reputation: 1042

Limit flex item height in a flexbox layout

I am trying to create a flexbox layout like shown in this jsfiddle. This is the HTML:

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
  </div>
  <div class="footer">
    footer
  </div>
</div>

This is the CSS:

.container {
  background-color: green;
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: yellow;
  flex: 0 0 50px;
}

.content {
  background-color: blue;
  flex: 0 0 90%;
  overflow: scroll;
}

.footer {
  background-color: red;
  flex: 0 0 40px;
}

And it works, but I would also limit the size of the entire layout not extend beyond the '.container' elements fixed height.

How can I achieve this?

Thanks, Gerald

Upvotes: 0

Views: 161

Answers (2)

Aziz
Aziz

Reputation: 7783

You just need to make .content fill the entire allowed space within the container by adding flex: 1; property to it.

Working Example:

var i;
for (i = 0; i < 100; i++) {
  $(".content").append("<div>hello " + i + "</div>");
}
.container {
  background-color: green;
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  border:3px solid black;
}

.header {
  background-color: yellow;
  flex: 0 0 50px;
}

.content {
  background-color: blue;
  flex: 1;
  overflow: scroll;
}

.footer {
  background-color: red;
  flex: 0 0 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
  </div>
  <div class="footer">
    footer
  </div>
</div>

jsFiddle: https://jsfiddle.net/azizn/0aumg6b0/

Upvotes: 1

Dhaval Chheda
Dhaval Chheda

Reputation: 5147

replace the old container code in the stylesheet with this one and see if it works

    <style>
        .container {
            background-color: green;
            height: 300px;
            max-height: 300px;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }

        .header {
            background-color: yellow;
            flex: 1;
            overflow: scroll;
            height: 100px;
        }

        .content {
            background-color: blue;
            flex: 7;
            overflow: scroll;
        }

        .footer {
            background-color: red;
            flex:1;
        }

    </style>

</head>

<body>

    <div class="container">
        <div class="header">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum!
        </div>
        <div class="content">
        </div>
        <div class="footer">
            footer
        </div>
    </div>

Upvotes: 0

Related Questions