Elements in flex container with predefined size

HTML-CSS
1

Hello

I have a flex box container that contains two containers as follows:

<div class="flex" id="flex">
     <section class="msger" id="msger_id">
     .....
    </section>
    <div class="chart-container" id="chart">
    ....
      </div>
</div>

The CSS is as follows:

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
}

.msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 80%;
    max-width: 80%;
    margin: 25px 10px;
    height: calc(100% - 50px);
    border: var(--border);
    border-radius: 5px;
    background: var(--msger-bg);
    box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
    min-width: 80%;
}

.chart-container {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
}

The problem now is that everything is squeezed together. I would like that msger fills the full height of the screen and then chart-container should be added below and should take as much space as it needs (in total both containers will take more than the height of the screen). For this purpose I have added height: calc(100% - 50px); to msger but somehow it does not take the full screen height.

How can this be done?

2

Hello!
I am not sure if this is what you are looking for, but I believe it can possibly help with your issue.

Happy coding! :slight_smile:

3

Thank you for pointing to this. I had a read but I don’t see how the flexbox container attributes can help so that the first element in the container takes the full screen height.

1 Like
4

We need to see all the CSS and HTML.

For example, in your other thread, you have align-items: center on the body. If you still have that CSS you can try removing it.

Also, if you add height: 100%; to the .flex container it should get the height from the body and pass it down to .msger as well so it can be set using %. Another option is to use vh instead of % for the height on .msger so it doesn’t depend on the parent element for its height calculation.

1 Like
5

Thank you very much. Removing align-items: center from the body did the trick. But now msger and chart-container fill the height of the screen together, i.e. msger is around 50% of the screen height and chart-container is 50% of the screen height. When I add height: 200vh to the flex container it works but then there is lot of unused space (because both elements together are less than 200vh).

6

Please post all the code you have currently.

You can give the flex items (.msger and .chart-container) whatever height you want them to be.

In the CSS from your other thread, you had height: calc(100% - 50px). You should be able to set it to whatever height it is you want. So 50% or whatever you want each of them to be (without making the parent twice as tall).

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.