HTML-滚动条切断文本

我试图得到一个元素，以适应剩余的空间（这将改变），然后滚动，如果需要。不幸的是，它不能正确地容纳剩余的空间

代码如下：

*{
边框：1px点蓝色；
垂直对齐：顶部；
溢出：隐藏；
}

此处的内容高度将发生变化




最后一个元素不显示
var html=[]；
对于（var i=0；i<100；i++）html.push（“
数据”+i）；
document.getElementById（“FillMe”）.innerHTML+=html.join（“”）；


最后一行数据

指定第一个详图元素的高度，在本例中为76px

将第二个细节元素（fillMe）的高度从100%更改为计算（100%-76px）

---

对我来说，它奏效了，原因如下：

问题是

中有两个块类型元素。因此，第二个

块（高度设置为100%）将占据

高度的100%，但第一个

块采用溢出高度

这里是固定的：使用

* {
边框：1px点蓝色；
垂直对齐：顶部；
}
.infopanel{
高度：80vh；
最大高度：80vh；
宽度：20vw；
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
调整内容：flex start；/*这将在顶部保留详细信息*/
/*调整内容：flex-end；*//*这将关闭底部的详细信息*/
}
.infopanel>详细信息{
宽度：100%；
}
.infopanel>.top详细信息{
溢出：可见；
最大高度：100%；
}
.infopanel>.bot详细信息{
溢出：自动；
}
此处的内容高度将发生变化
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

最后一个元素不显示
var html=[]；
对于（var i=0；i<100；i++）html.push（“
数据”+i）；
document.getElementById（“FillMe”）.innerHTML+=html.join（“”）；


最后一行数据

这种风格在td中不起作用，我建议您改为div

<div style="min-height: 100%;height: 100%;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;box-sizing: border-box;display: flex;">
    <details open="">
        <summary>Contents here will change in height</summary>
        <br><br><br>
    </details>
    <details id="FillMe" style="overflow:auto;box-sizing: border-box;flex: 1;-webkit-box-flex: 1;" open="">
        <summary>   Last element does not show</summary>
        <br> data 0<br> data 1<br> data 2<br> data 3<br> data 4<br> data 5<br> data 6<br> data 7<br> data 8<br> data 9<br> data 10<br> data 11<br> data 12<br> data 13<br> data 14<br> data 15<br> data 16<br> data 17<br> data 18<br> data 19<br> data 20<br> data 21<br> data 22<br> data 23<br> data 24<br> data 25<br> data 26<br> data 27<br> data 28<br> data 29<br> data 30<br> data 31<br> data 32<br> data 33<br> data 34<br> data 35<br> data 36<br> data 37<br> data 38<br> data 39<br> data 40<br> data 41<br> data 42<br> data 43<br> data 44<br> data 45<br> data 46<br> data 47<br> data 48<br> data 49<br> data 50<br> data 51<br> data 52<br> data 53<br> data 54<br> data 55<br> data 56<br> data 57<br> data 58<br> data 59<br> data 60<br> data 61<br> data 62<br> data 63<br> data 64<br> data 65<br> data 66<br> data 67<br> data 68<br> data 69<br> data 70<br> data 71<br> data 72<br> data 73<br> data 74<br> data 75<br> data 76<br> data 77<br> data 78<br> data 79<br> data 80<br> data 81<br> data 82<br> data 83<br> data 84<br> data 85<br> data 86<br> data 87<br> data 88<br> data 89<br> data 90<br> data 91<br> data 92<br> data 93<br> data 94<br> data 95<br> data 96<br> data 97<br> data 98<br> data 99<br> Last line of data
    </details>
</div>

此处的内容高度将发生变化




最后一个元素不显示

数据0
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
数据11
数据12
数据13
数据14
数据15
数据16
数据17
数据18
数据19
数据20
数据21
数据22
数据23
数据24
数据25
数据26
数据27
数据28
数据29
数据30
数据31
数据32
数据33
数据35
数据36
数据37
数据38
数据39
数据40
数据41
数据42
数据43
数据44
数据45
数据46
数据47
数据48
数据49
数据50
数据51
数据52
数据53
数据54
数据56
数据57
数据58
数据59
数据60
数据61
数据62
数据63
数据64
数据65
数据66
数据67
数据68
数据69
数据70
数据71
数据72
数据73
数据74
数据75
数据76
数据77
数据78
数据79
数据80
数据81
数据84
数据85
数据86
数据87
数据88
数据89
数据90
数据91
数据92
数据93
数据94
数据95
数据96
数据97
数据98
数据99
最后一行数据

我可以看出您使用了错误的html语义，而且有点混乱。为什么要为此使用

表

和

详细信息

标记？您是否愿意更改html结构？这只是一个简化版本。还有其他元素，我按表格对齐。无法设置设置像素。剩余高度将有所不同。您是否在chrome或firefox上尝试了代码？它不能正确调整以改变第一个的大小奇怪的是，它在JFIDLE中工作。我对flexbox一无所知。我觉得还是新的，我用的是chrome。我不确定里面到底有什么数据，但请尝试编辑版本。在我看来，它很好用。顶部细节高度调整以适合内容，底部适合其余高度。根据您的喜好调整顶部的最大高度。就我个人而言，我宁愿使用css框架来促进这种布局。在有角度的材质中，简单的静态高度动态高度

<div style="min-height: 100%;height: 100%;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;box-sizing: border-box;display: flex;">
    <details open="">
        <summary>Contents here will change in height</summary>
        <br><br><br>
    </details>
    <details id="FillMe" style="overflow:auto;box-sizing: border-box;flex: 1;-webkit-box-flex: 1;" open="">
        <summary>   Last element does not show</summary>
        <br> data 0<br> data 1<br> data 2<br> data 3<br> data 4<br> data 5<br> data 6<br> data 7<br> data 8<br> data 9<br> data 10<br> data 11<br> data 12<br> data 13<br> data 14<br> data 15<br> data 16<br> data 17<br> data 18<br> data 19<br> data 20<br> data 21<br> data 22<br> data 23<br> data 24<br> data 25<br> data 26<br> data 27<br> data 28<br> data 29<br> data 30<br> data 31<br> data 32<br> data 33<br> data 34<br> data 35<br> data 36<br> data 37<br> data 38<br> data 39<br> data 40<br> data 41<br> data 42<br> data 43<br> data 44<br> data 45<br> data 46<br> data 47<br> data 48<br> data 49<br> data 50<br> data 51<br> data 52<br> data 53<br> data 54<br> data 55<br> data 56<br> data 57<br> data 58<br> data 59<br> data 60<br> data 61<br> data 62<br> data 63<br> data 64<br> data 65<br> data 66<br> data 67<br> data 68<br> data 69<br> data 70<br> data 71<br> data 72<br> data 73<br> data 74<br> data 75<br> data 76<br> data 77<br> data 78<br> data 79<br> data 80<br> data 81<br> data 82<br> data 83<br> data 84<br> data 85<br> data 86<br> data 87<br> data 88<br> data 89<br> data 90<br> data 91<br> data 92<br> data 93<br> data 94<br> data 95<br> data 96<br> data 97<br> data 98<br> data 99<br> Last line of data
    </details>
</div>