I want to display two HTML tables (a main list and a detail view) in a responsive manner, such that at Boostrap’s xl breakpoint the two are shown side by side, and otherwise one below the other (with e.g. a 30/70 split).

Both tables can be quite long, and so I have them set up for tbody scrolling like this so that they stay within the screen viewport:

tbody {
    display: block;
    height: 80vh;
    overflow-y: scroll;
}

table thead, table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

The two tables are generated by Angular components, and both are contained inside a Bootstrap row:

<div class="row">
    <app-list class="col-xl-4" />
    <app-detail class="col-xl-8" />
</div>

This layout is working fine for the side-by-side mode. I cannot for the life of me find a way to shrink the (max) heights in top-to-bottom mode.

As a general design principle I want the two components to be standalone and independent of any media or container queries because they may get re-used in other layouts.

I hoped to be able to use media queries from the containing app level component’s CSS to control the sizes of the two components’ host elements. I’ve tried numerous combinations of supplying max-height values via vh and vb at every level of the DOM tree but nothing is working.

A further consideration is that if the app-list view only contains a few items I’d like the app-detail view to use all remaining available space (i.e. the ratio could be 10/90, but cannot exceed 30/70).

Is this even possible with pure CSS, or do I need to catch resize events.

NB: I’m developing for latest Chrome – backwards compatibility is not a concern.