html - 如何防止 Bootstrap 4 表响应溢出它的父级

Question

我正在尝试使用 Bootstrap 4 table table-responsive 类来让表格显示水平滚动条，这样当表格的宽度较大时它不会溢出它的父容器。

但是，问题是它溢出了它的父容器并且根本不显示滚动条。

table-layout:fixed; 不是解决方案，因为它固定了表格的宽度而不是使其可滚动

body {
  background: #999;
  color: white;
  width: 100%;
}

.parent {
  display: flex;
  background: #333;
  width: 100%;
}

.div-with-table {
  flex: 1 1 auto;
}

<div class="parent">
  <div class="div-with-table">
    <table class="table table-responsive">
      <tr>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
      </tr>
      <tr>
        <td>
          xxxxx
        </td>
        <td>
          xxxxx
        </td>
        <td>
          xxxx
        </td>
        <td>
          xxxx xxxx
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
      </tr>
      <tr>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
      </tr>
    </table>
  </div>
</div>

https://codepen.io/simPod/pen/PJPBEZ

我做错了什么？

Answer 1

如何添加这条规则:

.parent { overflow-x: scroll; }