Using floats, flexbox or a table, there are different methods to size two adjacent blocks to the same height or to the same width, dependent on their contents without using JavaScript.
I wonder if there is a way to achieve the same for panels of a tab box, of which only one is visible at a time.
So if for example a panel is empty, its size (or at least its background) should be extended to the size of the biggest panel in the stack of panels.
My intention is to prevent elements below or beside the tab box to jump to different positions when the tab is switched, but I don't want to assume anything about the dimensions of the panel contents since they are dynamic.
Using flexbox and
visibility: collapse
(see W3C draft), contents can be hidden while the occupied space is still taken into account.The following example is working on IE and Firefox, not (yet) in Safari, Opera and Chrome [in progress].