响应式表格和显示 flex (Bootstrap)答案

【问题标题】：Responsive table and display flex (Bootstrap)响应式表格和显示 flex (Bootstrap)
【发布时间】：2020-04-16 23:32:17
【问题描述】：

如何使用弹性容器显示 Bootstrap 表格的滚动？ https://getbootstrap.com/docs/4.4/content/tables/#responsive-tables

我需要 JSFiddle 示例的 DIVS。如果我删除 .flex_container 的 display:flex 并调整浏览器的大小它可以工作，以低分辨率显示滚动，但我无法更改结构，我需要那个 DIV。

有什么想法吗？（JSFiddle 示例）

谢谢。

https://jsfiddle.net/fekula/49by5oL3/4/

<style>
.flex_container {
    display: flex;
    position: relative;
    margin: 0 10px;
    background: Red;
    }

#main {
    padding: 10px;
    color: #000;
    background: #fff;
    flex-grow: 1;
    position: relative;
    }
</style>

【问题讨论】：

如果你不使用 css 溢出，你可以使用。详情：developer.mozilla.org/en-US/docs/Web/CSS/overflow
你能描述更多吗？否则，您可以共享图像。所以我们可以很好理解。
我想使用这种表格模型：getbootstrap.com/docs/4.4/content/tables/#responsive-tables 和弹性盒布局
详细解释你的问题。我很迷惑。你到底想要什么。以横向方式负责的表..？
@FeKuLa。我会做。给我一些时间。

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

将max-width: 100% 添加到#main 以获得表格的滚动条：

#main {
    padding: 10px;
    color: #000;
    background:
    #fff;
    flex-grow: 1;
    position: relative;

    // add this:
    max-width: 100%;
}

https://jsfiddle.net/m0aonz2k/

【讨论】：