Is there an elegant way to make MainContainer fill the whole webpage in height?

[Hyffer]

I noticed there was a flex layout in horizontal direction. But after going through the storybook, I was still unable to find how to make it align with its parent container in vertical direction.

return <div style={{
    height: "600px",
    position: "relative"
  }}>
              <MainContainer responsive> 
              ...
              </MainContainer>
</div>;

(The code on storybook is something like above. The height property is set to fixed 600px in this case.) Or I need to implement it myself outside of the ui kit?

[supersnager]

@Hyffer <MainContainer /> has the following styles by default:

position: relative;
height: 100%;

These styles come from the cs-main-container CSS class.

So, you have two possibilities:

1. Set position: relative, and height: 100% on the parent element.
2. Override the height property value in the cs-main-container CSS class.

You can also inspect HTML code in the Chatscope chat demo app to see how it's done.

[Hyffer]

Thanks a lot. I refer to the chat demo:

return <div style={{
    height: "100%",
    weight: "100%"
    position: "absolute"
  }}>
              <MainContainer responsive> 
              ...
              </MainContainer>
</div>;

And that solves my problem.

[titocosta]

Best way would be to use height: "100vh". That works for me, but then the children overflow anyway without scrollbar when there are many messages in the MessageList. I think the issue is that MessageList injects another wrapper div between itself and the messages underneath without a max-width: "inherit" css attribute.