CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 如何溢出:在弹性框内滚动大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经构建了这个布局:
<!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>

我想在每个弹性框内放置长列表.我需要它们单独滚动,同时填充浏览器窗口中的所有可用空间.我已经管理了后者,但是我怎么能得到一个弹性框来滚动而不是在溢出时增长?

解决方法

在发布此问题后我继续搜索,我发现这篇文章: Flexbox and vertical scroll in a full-height app using NEWER flexbox api

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

大佬总结

以上是大佬教程为你收集整理的css – 如何溢出:在弹性框内滚动全部内容,希望文章能够帮你解决css – 如何溢出:在弹性框内滚动所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。