Programmiererforum

body {
width: 100%;
height: 100%;
margin: 0;
}

.container {
width: 100%;
overflow-x: auto;
}

.wrapper {
display: flex;
}

.text {
min-width: 30px;
text-align: center;
}

.text:nth-child(even) {
background-color: #ddd;
}

.bar {
background-color: green;
height: 30px;
}< /code>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Eine fast identische Frage wurde bereits hier gestellt (setze die Kinderbreite auf die innere Breite der Eltern (Bildlaufbreite /Überlaufsrolle), aber die Lösung passt nicht zu meiner Umgebung. Ich habe fast keine Möglichkeit, die Container anzupassen und möchte so weniger wie möglich ändern, um die Kompatibilität mit Updates von madsable < /em> zu halten. /> Nur um sicherzustellen: < /strong> Dies ist ein super vereinfachtes Beispiel! Das .Container Element ist tatsächlich eine Komponente, die ich so weniger wie möglich berühren möchte! Und die grüne Bar könnte sogar breiter sein als der obige Inhalt! In diesem Fall sollte es auch in der oberen Inhaltsbreite bleiben! Dieses Detail muss < /strong> die tatsächliche Zeilenbreite passen.[code]body {
width: 100%;
height: 100%;
margin: 0;
}

.container {
width: 100%;
overflow-x: auto;
}

.wrapper {
display: flex;
}

.text {
min-width: 30px;
text-align: center;
}

.text:nth-child(even) {
background-color: #ddd;
}

.bar {
background-color: green;
height: 30px;
}< /code>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


[/code]