0

I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.

Here is an example.

I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.

<body>
    <div class="container">
        <div class="head"></div>
        <div class="main">
            <div class="painel"></div>
            <div class="dash">
                <div class="head-dash"></div>
                <div class="content-dash">
                    <div class="email-list">
                        <div class="head-content"></div>
                        <div class="content">
                            <div class="item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

https://jsfiddle.net/ricardosc12/rb2kjtfh/12/

change the variable quant -> 50 and you will see the problem

Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.

As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.

I'm looking for a solution to this using flex, but can you suggest other possibilities.

I looked around but it didn't work.

Make a div fill the height of the remaining screen space

rick
  • 554
  • 6
  • 18

1 Answers1

2

It's not the perfect answer but will solve your problem. change your height of content-dash to this

.content-dash{
    height: calc(100vh - 140px) ;
    padding: 25px;
    background: #EEEEEE;
}

We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.

Beginner
  • 182
  • 2
  • 14
  • thanks, this temporarily solves the problem. – rick Jul 28 '21 at 16:13
  • I say this because 'head-dash' is dynamic, increases its size with animation,I think this new problem has now emerged. – rick Jul 28 '21 at 16:18
  • nothing javascript doesn't solve, but here's the problem, there must be something to do with css only – rick Jul 28 '21 at 16:20