Same height on portlets

Hi,

I'm trying to design portlets that can have the same height if they are beside each other but have different content length. I've done a try in the below code pen where I succeded in getting them in the same height, but it messes up the body and footer elements in the portlet.

If someone has an idea in how to fix this I would be grateful.

Here's the link to the codepen:
Portlet code

Thanks for help!
Peter
Peter NordbergIT ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
All you need is adjusting the body style like :
&__body {
  padding: 2rem;
  overflow-y: auto;
  height: 70%;
}

Open in new window


Working live sample

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter NordbergIT ManagerAuthor Commented:
Ok, thanks, but why does the body get scrollable instead of just showing all content?
Zakaria AcharkiAnalyst DeveloperCommented:
You're welcome, Since there's much content, if you want to show all the content then you must increase the height of the body part what means increasing the height of the portlets too, else you will end up with something like :

https://codepen.io/acharki-zakaria/pen/wRpgoO
Peter NordbergIT ManagerAuthor Commented:
I have a min-height on the portlet, should I change that to somerthing else?
Zakaria AcharkiAnalyst DeveloperCommented:
Yes, that possible if you increase the min-height to :

min-height: 620px;

Open in new window


That will show you the full body text.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.