Question

我已经建立了这个布局：

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

我想在每个弹性框内放置长列表。我需要它们单独滚动，同时填充浏览器窗口中的所有可用空间。我已经管理了后者但是如何让一个弹性框滚动而不是在溢出时增长？

Answer 1

发布此问题后我一直在搜索，我发现了这篇文章：Flexbox and vertical scroll in a full-height app using NEWER flexbox api

建议将父元素高度设置为0。我尝试了它似乎工作：D

如何溢出：在弹性框内滚动

1 个答案: