css - 带有引导程序 4 的溢出容器

Question

我的目标是创建一个具有overflow x和overflow y具有的容器，auto因为我将在那里呈现的内容（大表）客户端应该看到一个带有可滚动内容的“窗口”+如果该容器与引导程序 4col和row. 我不想硬编码高度和宽度。

我认为该代码应该可以工作，但事实并非如此

.overflow-table {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.overflow-table .row {
    display: block;
}

<div class="overflow-table">
    <div id="dvData"></div>
</div>
<!-- to dvData I render at code behind table--> 

<div class="overflow-table">
    <div id="dvData">
         <table class="overflow-table"> <!-- I try too something like this-->
    </div>
</div>

谢谢！！

解决方案

标签： cssbootstrap-4overflow

Answer 1

在桌子周围设置一个max-width和。使用和单位或百分比来避免硬编码宽度和高度。max-heightdivvwvh

.window-overflow {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 95vh;
    max-width: 100%;
}

https://codepen.io/nickfindley/pen/QzGWPb