Html 使用flexbox的响应表

我正在设计一个有表格的页面。在响应屏幕中，我希望表格能够水平滚动，所以我使用了引导

。表格响应
类。由于flex应用于其部分，因此table responsive不起作用

我的代码如下：

<header class="page-header"></header>
<section class="page-content">
   <div class="container">
      //Table Style here
   <div>
</section>
<footer class="page-footer"></footer>

当我移除display flex时，它可以正常工作。
我该怎么做才能克服这个问题呢？
我只是通过添加

display:block;

在媒体中查询页面内容。
这是您想要的吗？（
边框
和
最小宽度
只是为了容易看到预期的行为）
display:block;