CODEWITHSUNDEEP
htmlcssdynamic
DrColza
DrColza

Reputation: 110

Variable html column height dependent on contents

In order to create a column which expands relative to the amount of data within it up to a maximum height, I have implemented the following approach;

.container { 
    max-height: 1000px;
}

.column-body {
    height: 100%;
    overflow-y: auto;
}

<div class="container">
    <div class="column-body">
        Variable amounts of data
        ...
    </div>
</div>

However, the height of the column remains fixed to the height of the window and doesn't change based on the amount of content. How can I achieve the behaviour I desire from the approach I'm taking?

Upvotes: 0

Views: 78

Answers (1)

Rahul Desai
Rahul Desai

Reputation: 15501

You should set overflow-y: auto to the container instead.

Working Demo

Upvotes: 1

Related Questions