Hallo ich habe ein Flexbox-Layout mit 3 Boxen, eine grosse oben 2 kleine unten.
Jetzt habe ich eine Liste oben, die eine festgelegte Höhe (ca 50% Höhe insgesamt) nicht überschreiten sollte, (scrollbar werden, wenn diese überschritten ist). Leider bekomme ich diese feste Höhe nicht hin. D.h. die Liste nimmt immer mehr Platz ein. Hat hier jemand einen Tip? Vielen Dank.
(Code und Bild)
HTML-Code:
<div class="user-panel">
<div class="user-panel-wrapper">
<div class="inbox-messages">
<div class="inbox-messages-title">
Inbox/messages for user...
</div>
<div class="inbox-messages-messages">
<ul>
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
<li>Message 4</li>
<li>Message 5</li>
<li>Message 6</li>
<li>Message 7</li>
</ul>
</div>
</div>
<div class="users-box">
<div class="users-list">
List users
</div>
<div class="users-message-box">
message box users
</div>
</div>
</div>
</div>
<style>
/* user panel */
.user-panel {
height: 90%;
width: 95%;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.user-panel-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.inbox-messages {
border: 1px solid green;
width: 100%;
height: 90%;
display: flex;
flex-direction: column;
padding: 20px 20px;
}
.inbox-messages-title {
width: 100%;
/* height: 100%; */
}
.inbox-messages-messages {
width: 100%;
}
.inbox-messages-messages ul {
list-style-type: none;
width: 100%;
padding: 15px 0 0 0;
}
.inbox-messages-messages ul li {
display: block;
padding: 8px;
margin: 5px 0 0 0;
border: 1px solid red;
}
.users-box {
display: flex;
justify-content: center;
border: 1px solid goldenrod;
width: 100%;
height: 100%;
}
.users-list {
border: 1px solid royalblue;
width: 100%;
height: 100%;
}
.users-message-box {
border: 1px solid red;
width: 100%;
height: 100%;
}
/* end of user panel */
</style>