Как я могу получить переполнение: прокрутка внутри flex box

У меня есть buildt этот макет:

<!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>

Я хочу поместить длинные списки вещей внутри каждой коробки flex. Мне нужно, чтобы они прокручивались индивидуально и одновременно заполняли все доступное пространство в окне браузера. Мне удалось последнее, но как я могу получить flex box для прокрутки, а не расти при переполнении?

6
box css flexbox

1 ответов

Я продолжал искать после публикации этого вопроса, и я нашел этот пост:Flexbox и вертикальная прокрутка в полноразмерном приложении с использованием нового Flexbox api

Он предложил установить высоту родительских элементов в 0. Я попробовал, и он, кажется, работает: D

9