flexbox内のテーブルのoverflowが効かない

Question

横幅指定の無いflexboxコンテナーの中に
bootstrapのtable-responsiveで横幅の大きなテーブルを入れようとおもったらうまくはみ出してくれない

<div class="flexwrap">
  <div class="flex1"></div>
  <div class="flex4"></div>
  <div class="flex1"></div>
</div>

こんな感じで
横幅が1：4：1の3カラムレイアウトになってます

この真ん中のメインコンテンツにテーブルがあります

<div class="flexwrap">
  <div class="flex1"></div>
  <div class="flex4">
    <div class="table-responsive">
           <table></table>
       </div>
  </div>
  <div class="flex1"></div>
</div>

ここのテーブルは横幅が大きなものにしたく
はみ出した部分はoverflow-x：scrollとしたい

しかし現状はtable幅が大きいと
flex4の幅も大きくなり絡む落ちしちゃいます。

これってflex-itemとなる要素の幅を明示しないと駄目ですかね。。。
それしか方法はないのでしょうか？

Comments

[kei344]

CSSも追記ください。

Answer 1

ひとまずflex-itemの幅を指定して解決しました