[CSS] [HTML/CSS] Scrollproblem: Zeitplaner mit Timeline

[Lazeboy]

Hallo zusammen,

ich bin gerade dabei einen Zeitplaner zu bauen. Das Ganze sieht ungefähr so aus:



Solange ich nicht maximale Breite nicht überschreite, funktioniert das wunderbar. Die Timeline scrollt mit und die Offset passen alle.

Jetzt möchte ich aber, wie man oben sieht, noch Gruppen mit einbauen und somit auch horizontal scrollen und möglichst nur CSS (Flex) ist erlaubt. Kann mir hier jemand helfen?

Mein bisherige Code sieht so aus (ist durch das ganze rum probieren nicht mehr der schönste):
HTML

<div [hidden]="selectedView.id != View.Day" class="scheduler-day" fill-height>

  <div class="calendar-header">
    <div class="weekday-container">
      <!-- <span class="weekday">KW<br>{{ calendarData.week }}</span> -->
    </div>
    <ul>
      <li><span>Gruppe 1</span></li>
      <li><span>Gruppe 2</span></li>
    </ul>
  </div>

  

  <div class="calendar-main" fill-height>
    <div class="calendar-sidebar">       
    
      <ul class="timeline">
        <li *ngFor="let t of times"><span>{{ t }}</span></li>
      </ul>
    </div>

    <div class="calendar-body">
  
      <div class="calendar-events">
          <ul class="calendar-grid">
            <li *ngFor="let t of times"></li>
          </ul>
      </div>


    </div>
  </div>
  
</div>

CSS

.scheduler-day {
	//TODO: Warum funktioniert flex nicht, aber box funktioniert...CHROME BUG?
	// display: flex;
	display: box;
	
	flex-direction: column;
	background: color($colors, background-secondary);
	color: color($colors, text-primary);
	background: lightcyan;
	overflow: hidden !important;

	.calendar-header {
		display: flex;
		height: $scheduler-calendar-header-height;
		line-height: $scheduler-calendar-header-height;
		width: 100%;

		.weekday-container {
			padding: 0;
			margin: 0;
			text-align: center;
			width: $scheduler-calendar-sidebar-width;
			height: $scheduler-calendar-header-height;
			line-height: $scheduler-calendar-header-height;

			border-left: 1px solid color($colors, border-primary);
			border-bottom: 1px solid color($colors, border-primary);

			.weekday {
				display: inline-block;
				padding: 0 1.25rem;
				vertical-align: middle;
				line-height: 1.5rem;
				font-size: 0.8rem;
			}

			.timeline-fix-width {
				height: 0;
				visibility: hidden;
				overflow-y: hidden;

			}

			
		}

		ul {
			display: flex;
			flex: 1 0 auto;
			list-style: none;
			margin: 0;
			padding: 0;

			li {
				display: inline-block;
				flex: 1 0 auto;
				min-width: 60%;
				height: $scheduler-calendar-header-height;
				line-height: $scheduler-calendar-header-height;
				text-align: center;
				border-bottom: 1px solid color($colors, border-primary);
				border-left: 1px solid color($colors, border-primary);
				
			}
		}
	}

	
	.calendar-main {

		flex: 1 0 auto;
		display: flex;
		width: 100%;
		max-width: 100%;

		.calendar-sidebar {			
			width: $scheduler-calendar-sidebar-width;

			border-left: 1px solid color($colors, border-primary);
			.timeline {
				list-style: none;
				margin: 0;
				padding: 0;
				
				li {
					padding: 0 1.25rem;
					height: $scheduler-calendar-row-height;
					line-height: $scheduler-calendar-row-height;
	
					span {
						display: inline-block;
						font-size: 0.8rem;
						transform: translateY(50%);
					}
				}
			}
		}

		.calendar-body {

			flex: 1 0 auto;

			.calendar-events {
				.calendar-grid {
					list-style: none;
					margin: 0;
					padding: 0;

					li {
						width: 0;
						height: $scheduler-calendar-row-height;

						&:after {
							content: '';
							position: absolute;
							width: 100%;
							height: 1px;
							background: color($colors, border-primary);
						}

						&:first-of-type:after {
							height: 0;
						}
					}
				}

				.calendar-header-width-fix {
					margin: 0;
					padding: 0;
					list-style: none;

					li {
						display: inline-block;
						height: 0;
						width: 500px;
						visibility: hidden;
					}
				}
			}
		}

	}
}

Grüße
Lazeboy

[krankheit]

flex funktioniert in chrome
Du musst dem äußeren Element einfach overflow-x:scroll; geben.
Siehe