Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 25.06.2020, 17:00
Iago2 Iago2 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard flexbox-layout, scrolling für Liste erzwingen

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>
Angehängte Grafiken
Dateityp: jpg user_panel.JPG (75,7 KB, 6x aufgerufen)
Mit Zitat antworten
Sponsored Links