I am working with a Learning Management System that has the ability to inject custom html, css and javascript.
I've put together a tabbed content template that works in the constraints of the LMS by cribbing together various examples on CodePen.
I am looking for a way to automatically set the height of all of the tabs based on the height of the tab with the most content.
I've found an example in a SO answer which does what I want:
Is there a way to make an HTML tab container fix its height to that of its tallest tab?
In theory, this is great - but the restrictions of the LMS mean that I can't import external scripts, e.g. jQuery. So it won't work on the LMS.
This example also works, but uses jQuery and Bootstrap:
https://observablehq.com/@rkaravia/css-trick-tabs-with-consistent-height
Is there any way of doing this entirely with html, CSS and JS? And not using jQuery, Bootstrap etc? If not, I will just set a fixed height and set the overflow so that is scrolls within the container (not ideal).
This example you provided only uses css and html and some bootstrap styling.
Nothing complicated here. You just make the container with overflow: hidden and also display: flex that they are in one row
And then for the inactive ones, set visibility: hidden and margin-left: -100% so that they go beyond the container and at the same time maintain the size.
For example on codepan