CODEWITHSUNDEEP
htmlcssreactjs
Prabodh
Prabodh

Reputation: 175

CSS: How to make stop div from shrinking in height when content change

I am implementing a tab layout in React. I have a tabs div which contain two more divs tab-headers and tab-container. The tab-container div contains individual tabs divs. The content in the tabs div vary in height and it always shrinks to fit the content. How ever I want the div to be the size of the largest tabs div. I do not want to use static heights.

This is the css:

.tab-headers{
    display: grid;
    grid-auto-flow: column;
    width: fit-content;
}

.tab-header {
    font-size: 1rem;
    font-weight: normal;
    padding: 5px;
    background: var(--primary-bg);
    padding: 5px 20px;
}

.tabs-container {
    padding: 10px;
}

.tabs{
    height: 100%;
    background-color: var(--active-bg);
}

.tab{
    width: 100%;
    height: 100%;
    display: none;
}

.active {
    display: initial;
}

.active-header {
    background-color: var(--active-bg);
    border-top: 2px solid var(--accent-bg);
}

.tab-header:hover {
    cursor: pointer;
}

This is what's happening: enter image description here enter image description here

Upvotes: 1

Views: 8727

Answers (2)

Ariel
Ariel

Reputation: 2742

you can use min-height and max-height properties in your CSS and set overflow to scroll if needed.

Upvotes: 2

Mhd Wael Jazmati
Mhd Wael Jazmati

Reputation: 667

you can use min-height in your css.

Upvotes: 0

Related Questions