Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1402324592933408769

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Height</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="panel">
            <div class="tab">
                <div class="tab-header">
                </div>
                <div class="tab-content">
                    <div class="card-actions"></div>
                    <div class="card-groups">
                        <div class="card-group">
                            <div class="title">
                            </div>
                            <div class="card-list">
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    min-height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}
<div class="container">
    <div class="panel">
        <div class="tab">
            <div class="tab-header">
            </div>
            <div class="tab-content">
                <div class="card-actions"></div>
                <div class="card-groups">
                    <div class="card-group">
                        <div class="title">
                        </div>
                        <div class="card-list">
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    min-height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}
 

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Height</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="panel">
            <div class="tab">
                <div class="tab-header">
                </div>
                <div class="tab-content">
                    <div class="card-actions"></div>
                    <div class="card-groups">
                        <div class="card-group">
                            <div class="title">
                            </div>
                            <div class="card-list">
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    min-height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    min-height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}
<div class="container">
    <div class="panel">
        <div class="tab">
            <div class="tab-header">
            </div>
            <div class="tab-content">
                <div class="card-actions"></div>
                <div class="card-groups">
                    <div class="card-group">
                        <div class="title">
                        </div>
                        <div class="card-list">
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 

Fonte Link

Como manter um DIV filha responsiva sem sobrepor a DIV pai e sem utilizar overflow:hidden

Caros, estou a algum tempo tentando aplicar um layout em HTML porem estou tendo problemas em manter as DIVs responsivas. Basicamente o layout que quero é esse aqui.

inserir a descrição da imagem aqui

Porem ao adicionar mais DIVs da cor tomato o layout fica com sobreposição e acabo chegando a este resultado.

inserir a descrição da imagem aqui

Gostaria de resolver este problema porem não consegui encontrar nenhuma solução.

Segue meus códigos HTML e CSS para analise.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Height</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="panel">
            <div class="tab">
                <div class="tab-header">
                </div>
                <div class="tab-content">
                    <div class="card-actions"></div>
                    <div class="card-groups">
                        <div class="card-group">
                            <div class="title">
                            </div>
                            <div class="card-list">
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                                <div class="card"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
    padding: 32px;
    background-color: lightgray;
}

.panel {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

.tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tab-header {
    min-height: 48px;
    background-color: salmon;
}

.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
    padding: 16px;
}

.card-actions {
    min-height: 48px;
    background-color: orangered;
}

.card-groups {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 16px;
    background-color: orange;
    overflow: auto;
}

.card-group {
    display: flex;
    flex-direction: column;
    min-width: 355px;
    height: 100%;
    background-color: orchid;
    margin-right: 16px;
    padding: 16px;
}

.title {
    background-color: sandybrown;
    height: 48px;
    margin-bottom: 16px;
}

.card-list {
    background-color: seashell;
    height: 100%;
    overflow: auto;
}

.card {
    height: 100px;
    background-color: tomato;
    margin-bottom: 12px;
}