html - 响应式表格和显示 flex(Bootstrap)

Question

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

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

Answer 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/