Wie kann ein Element horizontal ohne Min-width oder eine exakte feste Breite gescrollt werden?

Question

Ich versuche, eine Tabelle zu erstellen, die reagieren werden, aber es einfach will ich zu machen, um es horizontal machen scrollen, wenn es zu viele Spalten.

.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>

Um die Scroll-Effekt I min-Breite oder eine feste Breite verwenden zu haben, aber ich möchte nicht, dass, weil ich die Tabelle möchte es zu reagieren, wenn Überschreitet die Fensterbreite nicht, sollte es nur natürlich sein, und wenn es übertrifft, scrollt es.

Um eine noch bessere Vorstellung davon, was mein Problem ist:

Was wie meine Tabelle aussieht:

Mehr von dem, was wie meine Tabelle aussieht:

Was passiert, wenn ich die min-width entfernen:

Was passiert, wenn ich weniger zufrieden mit min-Breite:

Was passiert, wenn ich weniger Inhalt haben, ohne min-width:

Answer 1

Versuchen Sie es mit der CSS overflow-x property und legen Sie ein Element, das Sie um Ihre Tabelle gewickelt haben, auf "scrollen". Also mit HTML wie folgt aus:

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

und CSS wie folgt aus:

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

Answer 2

ich meine Lösung gefunden habe:

.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; 
}