Wie kann ich overflow:scroll innerhalb einer flex-box

Habe ich aus diesem layout:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
html, body{
  margin:0;
  padding:0;
  height:100%;
}
.flex{
  display:flex;
  flex-direction:column;
  min-height:50%;
  width:33.3333%;
  float:left;
  border:1px solid #C8C7CC;
  box-sizing:border-box;
  overflow:scroll;
}
.flex:last-child{
  width:66.6666%;
}
</style>
</head>

<body>
<div class="flex">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
    </ul>
</div>
<div class="flex">

</div>
<div class="flex">

</div>
<div class="flex">

</div>
<div class="flex">

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

Will ich lange Listen von Dingen, die in jedem flex-box. Ich brauche Sie, um zu Blättern, einzeln und zur gleichen Zeit, füllen Sie alle verfügbaren Platz im browser-Fenster. Ich habe es geschafft, die letztere aber, wie bekomme ich eine flex-box zu Blättern, anstatt zu wachsen, wenn übergelaufen?

Sie müssen einige max-height noch height. Ansonsten overflow ist nutzlos.
Ähnlich: stackoverflow.com/questions/21515042/...

InformationsquelleAutor Demiurgen | 2015-07-08

  1. 9

    Hielt ich auf der Suche nach der Buchung dieser Frage, und ich fand diesen Beitrag: Flexbox und vertikale Bildlaufleiste in eine volle Höhe-app mit NEUEREN flexbox-api

    Schlug er die Einstellung des übergeordneten elements Höhe auf 0.
    Ich habe es versucht und es scheint zu funktionieren 😀

    Wenn Sie die Antwort auf Ihre eigene Frage nutzen Sie bitte das Häkchen "schließen" die Frage.
    Können Sie mir helfen mit diesem problem? stackoverflow.com/questions/43175481/...
    O M G !!! Werke)))))

    InformationsquelleAutor Demiurgen

Schreibe einen Kommentar