Question

我有一个网格区域“ main”，它也是一个网格。在main中，我还有2个网格，“ main1”和“ main2”，“ main1”用于即将到来的消息，这些消息显示在“ main”的左侧，“ main2”发送的消息，显示在“ main”的右侧主要”。在“ main”中，我使用overflow-y：但是当这两个网格溢出“ main”时，它们将无法正确显示

我已经尝试过溢出-y：滚动；但显示不正确

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>

在网格区域“ chatbar”中，正常溢出时它会显示内容，我不知道自己做错了什么。

enter image description here enter image description here

网格内的网格无法正常溢出

0 个答案: