I have a component within an angular material card. The component has two divs, the content and the footer both of which are wrapped in a container div
.wrapper { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; box-sizing: border-box;}.content { flex: 1; box-sizing: border-box; overflow: auto; scrollbar-width: thin;}.footer { box-sizing: border-box; height: 50px;}The idea is the content fills the remaining space and is scrollable when the content exceeds the available space.
This looks great when the content is less than the size of its div, however as soon as exceeds the size of the div the footer is pushed down by a number of pixels.
I have done this in a simplified html page and all works as expected, as soon as I put the same html and corresponding css within an angular material card (in a dashboard) it behaves differently and looks horrible.
Has anyone come across this before and is there a solution or a work around?
Thanks in advance