最小幅または正確な固定幅を使用せずに要素を水平方向にスクロールする方法はありますか？

Question

という応答性のあるテーブルを作成しようとしていますが、単純すぎると、カラムが多すぎると水平方向にスクロールするようにしたいのです。

.fixed-table-wrap { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    overflow: hidden; 
 
} 
 
.fixed-column { 
 
    width: 140px; 
 
} 
 
.standard-column { 
 
    width: calc(100% - 140px); 
 
    overflow-x: auto; 
 
} 
 
.sc-content { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    min-width: 1485px; 
 
    width: 100%; 
 
}

<div class="fixed-table-wrap"> 
 
    <div class="fixed-column"> 
 
    <div class="fc-content"> 
 
    
 
    </div> 
 
    </div> 
 
    <div class="standard-column"> 
 
    <div class="sc-content"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
</div>

スクロール効果を持つためにはときに、私は、MIN-幅または固定幅を使用する必要がありますが、私はテーブルが応答するようにしたいので、という必要はありませんウィンドウの幅を超えていないので、それはちょうど自然でなければならず、それを超えるとスクロールします。

は私の問題が何であるかのより良いアイデアを得るために：

私のテーブルには、どのようなものか：

私のテーブルがどのように見えるかの詳細：

を

最小幅を削除するとどうなりますか：

私は最小幅の少ないコンテンツを持っていると何が起こる：私はWITHOUT少ないコンテンツを持っている場合はどうなり

分幅：

Answer 1

CSS overflow-x propertyを使用し、テーブルの周りをラップした要素を「スクロール」に設定してください。したがって、このようなHTMLでこのような

<div id="table-wrapper"> 
    <table> 
     <!-- table content here --> 
    </table> 
</div> 

とCSS：

<style type="text/css"> 
#table-wrapper { 
width: 100%; 
x-overflow: scroll; 
} 
</style> 

Answer 2

私は私の解決策を見つけた：

.fixed-table-wrap { 
    display: flex; 
    flex-wrap: wrap; 
    overflow: hidden; 
    width: fit-content; 
} 
.fixed-column { 
    width: 140px; 
} 
.standard-column { 
    width: calc(100% - 140px); 
    overflow-x: auto; 
} 
.sc-content { 
    display: flex; 
    flex-wrap: wrap; 
    width: max-content; 
} 
.child { 
    width:140px; 
}