Sizing Custom CSS Block to Parent Height

[teg3r56]

Hey, I’m having trouble getting this CSS element i made to properly size to the Parent (stVerticalBlock)'s height. I’ve tried a bunch of different tactics or “hacks” with no luck. If anyone has any ideas, they would be greatly appreciated.

Current CSS (I know my code doesn’t make much sense, but trust me I’ve tried most obvious or standard ways of doing it) “def hue_shift_square():
with stylable_container(key=“hue-container”, css_styles=”“”
div#hue-container {
display: flex;
position: relative;
height: 100%;
}

    .hue-block {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        padding: 1rem;
        border-radius: 15px;
        background: black;
        background-size: 1000% 1000%;
        opacity: 0.7;
        animation: gradient-shift 30s linear infinite;
        background-image: linear-gradient(
            120deg,
            #0000FF,
            #0000E0,
            #4682B4,
            #0000A0,
            #000080,
            #000060,
            #000040,
            #000020,
            #000010,
            #0000FF
        );
        z-index: 1;
    }

    @keyframes gradient-shift {
        0%, 100% { background-position: 100% 50%; }
        50% { background-position: 0% 50%; }
    }
"""):
    st.markdown("<div class='hue-block'></div>", unsafe_allow_html=True)"

[teg3r56]

the image with the bar directly above is what happens on run, and the properly sized one is with manual HTML intevention.

[dataprofessor]

Hi @teg3r56

Alternatively, you could explore using the add_vertical_space method from streamlit-extras component to add vertical spaces to the form. More info and code snippet in the link below:

https://arnaudmiribel.github.io/streamlit-extras/extras/add_vertical_space/