При масштабировании окна оно съедает нижние кнопки

Question

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" href="style.css">
    <title>App</title>
  </head>
  <body>
    <div id="top">
      <span><button id="search">Search</button></span>
      <span><button id="installed">Installed</button></span>
    </div>
    <aside id="software-sources">
      <div id="snap"><button>Snap</button></div>
      <div id="flatpack"><button>Flatpack</button></div>
      <div id="appimage"><button>Appimage</button></div>
    </aside>
  </body>
</html>

aside {
    
}

aside button {
    height: 50px;
    width:  50px;
}

#search {
    margin-right: 5px;
}

#installed {
    float: right;
}

#snap {
    
}

#flatpack {
    align: left;
    vertical-align: middle;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

#appimage {
    align: left;
    vertical-align: bottom;
    top: 100%;
    position: absolute;
    transform: translateY(-100%);
    margin-bottom: 500px;
}

#software-sources {
    margin-top: 30%;
    margin-left: 5px;
    min-height: 300px;
    max-width: 100px;
    position: relative;
}

#top {
    display: flex;
    justify-content: center;
}

#top button {
    width: 200px;
}

БЛОГ НА HUSL

При масштабировании окна оно съедает нижние кнопки

Ответы (0 шт):