Elements in flex container with predefined size


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

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

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?

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:

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

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

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).

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).

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