сетка внутри сетки не переполняется должным образом - PullRequest
Новая
       5

сетка внутри сетки не переполняется должным образом

0 голосов
/ 04 февраля 2019

У меня есть область сетки "main", которая также является сеткой.В основном, у меня также есть еще 2 сетки, "main1" и "main2", "main1" для входящих сообщений, которые отображаются в левой части от "main", "main2" это отправленные сообщения, которые отображаются в правой части от "главный".В «main» я использую overflow-y: scroll;но когда эти две сетки переполняют «основную», они не отображаются должным образом

Я пробовал overflow-y: scroll;Но он не отображается должным образом 

html, body {
margin: 0;
padding: 0;
height: 100%;
}
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: 1fr;
}

.main {
height: 1fr;
overflow-y: scroll;
position: relative;
grid-area: main;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
max-height: 100%;
min-height: 0;
align-items: end;
align-content: end;
}

.main1 {
display: grid;
justify-items: start;
align-items: end;
}

.main1 > div {
display: grid;
max-width: 50%;
justify-items: start;

}

.main1 > div > p {
word-break: break-word;
box-sizing: border-box;
font-family: karla, serif;
font-size: 17px;
line-height: 30px;
margin: 1px;
padding-left: 7px;
padding-right: 7px;
background-color: #ecf0f1;
border-radius: 20px;
}


.main2 {
display: grid;
justify-items: end;
align-items: end;
}

.main2 > div {
max-width: 50%;
display: grid;
justify-items: end;
}

.main2 > div > p {
color: white;
font-family: karla, serif;
font-size: 17px;
line-height: 30px;
word-break: break-word;
box-sizing: border-box;
padding-left: 7px;
padding-right: 7px;
margin: 1px;
background-color: rgb(166, 149, 199);
border-radius: 20px;
}

.navi {
grid-area: navi;
}

.sidebar {
grid-area: sidebar;
}

.footer {
grid-area: footer;
}

.chatbar {
overflow-y: scroll;
grid-area: chatbar;
display: grid;
align-items: center;
}

.chatbox {
justify-self: stretch;
resize: none;
}

.chatbox > div {
float: left;
word-break: break-all;
font-size: 20px;
width: 100%;
outline: none;
}

[contenteditable=true]:empty:not(:focus):after {
color: grey;
content: attr(data-text);
}


.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 8fr 1fr;
grid-template-areas: 'header header header' 'navi main sidebar' 
'footer chatbar .';

} 

// here's HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid</title>
<link rel="stylesheet" href="grid.css">
<script src="grid.js"></script>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main">
    <div class="main1">
        <div>
            <p>Hello!</p>
            <p>Hello!</p>
        </div>
    </div>
    <div class="main2">
        <div>
            <p>how you doing</p>
            <p>Hi!</p>
            <p>In a future level of grid layout we may well have a method of creating nested grids that do maintain
                relationship to the parent grid. This would mean that items other than direct children of the grid
                could participate in an overall grid layout.</p>
            <p>In a future level of grid layout we may well have a method of creating nested grids that do maintain
                relationship to the parent grid. This would mean that items other than direct children of the grid
                could participate in an overall grid layout.</p>
            <p>In a future level of grid layout we may well have a method of creating nested grids that do maintain
                relationship to the parent grid. This would mean that items other than direct children of the grid
                could participate in an overall grid layout.</p>
        </div>
    </div>
</div>
<div class="chatbar">
    <div class="chatbox">
        <div contenteditable="true" data-text="Enter text here" id="chat"></div>
    </div>
</div>
<div class="footer"></div>
<div class="sidebar"></div>
<div class="navi"></div>

</div>
</body>
</html>

В области чата в области сетки, он отображает содержимое при нормальном переполнении, я не знаю, что я сделалнеправильно.

введите описание изображения здесь введите описание изображения здесь

...