wie überfüllter Text zu lösen

Question

Kann mir bitte jemand helfen, das Layout von meinem Stift zu lösen?

Wenn ich anfange, die Größe der Seite zu ändern, beginnen Inhalt der Listen übergelaufen und ich bin nicht in der Lage herauszufinden, was es sein kann.

Ich habe dem Abschnitt, in dem ich die Tabelle habe, eine Auffüllung gegeben, um genau zu sehen, wie der Inhalt überläuft.

div.tables{ 
    padding: 0 20px; 
} 

Vielen Dank im Voraus.

Answer 1

Sie mischen display: flex mit spezifischen width Eigenschaften.

Wenn Sie display: flex auf Ihrem Tabellen Behälter verwenden, Stick mit flex: 1 auf Tischen, so statt:

table{ 
    width: 50%; 
} 

Gehen Sie mit:

table{ 
    flex: 1; 
} 

Answer 2

Sie müssen sich auf den Inhalt Rechtfertigung setzen der Elterncontainer, damit die Elemente wissen, wie man sich beugt. Sie müssen auch die Tabellen so einstellen, dass sie flexibel angezeigt werden.

div.tables{ 
    padding: 0 20px; 
    justify-content:center; 
} 
table { 
    display:inline-flex 
}