How to Make Streamlit st.columns Heights Dynamic with Nested Containers?

Using Streamlit
, ,
1

Hello Streamlit Community,

I’m trying to create a layout with two columns using st.columns. The first column (col0[0]) has one container with a fixed height, while the second column (col0[1]) has two containers, and I want their heights to adjust dynamically based on the viewport size or content. Here’s a simplified example of my code:

col0 = st.columns(2, gap="small")

with col0[0]:
    with st.container(height=1850, border=True, key="sdv"):
        tab1, tab2 = st.tabs(["📊 Scatter Distribution View", "📈 Time Series View"])
        with tab2:
            time_container = st.empty()
            with time_container:
                st.info("***Please click on a SRP to display Time series.***")
        with tab1:
            sdv_fig(filtered_data, time_container, zoom_level=sdv_zoom_level)

with col0[1]:
    # Container for Top View figure
    with st.container(height=915, border=True, key="top"):
        top_fig(filtered_data, time_container, zoom_level=top_zoom_level)

    # Container for Side View figure
    with st.container(height=917, border=True, key="side"):
        side_fig(filtered_data, time_container)

I want:

  1. The heights of the containers in col0[1] to adjust dynamically based on their content and viewport size.
  2. The total height of col0[1] to align with col0[0].

I tried CSS overrides for the stPlotlyChart elements (code below), but I’m struggling to make the heights of the columns and containers fully responsive and dynamic:

/* Sample CSS adjustments */
[data-testid="stPlotlyChart"] > div {
    height: auto !important;
}
[data-testid="stPlotlyChart"]:nth-of-type(1) > div {
    height: 100vh !important;
}
[data-testid="stPlotlyChart"]:nth-of-type(2) > div,
[data-testid="stPlotlyChart"]:nth-of-type(3) > div {
    height: 50vh !important;
}

Question:
How can I make the heights of col0[1]'s containers (top and side) dynamic such that:

  • They equally share space vertically within col0[1].
  • The total height of col0[1] aligns with col0[0].

If there’s a better approach to achieve this dynamically, I’m open to suggestions. Thank you!