title: Blazor component flex lines go outside of the component layout
body: <p>I created blazor calendar component which consists of two parts Header and weekview components. The component flex lines go beyond the component itself and I could not figure out Why? I have attached a screenshot of the issue.</p>
  <p><strong>Header (Calendar Component) code</strong></p>
  <pre><code>&lt;div class=&quot;maincontainer&quot;&gt;
  
      &lt;div class=&quot;viewtitle&quot;&gt;Augest 2022&lt;/div&gt;
  
      &lt;div class=&quot;lbuttons&quot;&gt;
          &lt;button class=&quot;button&quot;&gt;&amp;#60;&lt;/button&gt;
          &lt;button class=&quot;button&quot;&gt;&amp;#62;&lt;/button&gt;
          &lt;button class=&quot;button&quot;&gt;Today&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;mbuttons&quot;&gt;
          &lt;label class=&quot;datelabel&quot;&gt;Monady, Augest 21, 2022&lt;/label&gt;
          &lt;input class=&quot;dateinput&quot; type=&quot;datetime-local&quot; id=&quot;schedule-time&quot;
                 name=&quot;schedule-time&quot; value=&quot;2022-06-12T19:30&quot;
                 min=&quot;2022-06-07T00:00&quot; max=&quot;2022-06-14T00:00&quot;&gt;
          &lt;input class=&quot;button&quot; type=&quot;button&quot; id=&quot;btnsubmit&quot; value=&quot;Submit&quot;&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;rbuttons&quot;&gt;
          &lt;button class=&quot;button&quot; @onclick=&quot;@(() =&gt; DayView_Click())&quot; @onclick:stopPropagation=&quot;true&quot;&gt;Day&lt;/button&gt;
          &lt;button class=&quot;button&quot; @onclick=&quot;@(() =&gt; WeekView_Click())&quot; @onclick:stopPropagation=&quot;true&quot;&gt;Week&lt;/button&gt;
          &lt;button class=&quot;button&quot; @onclick=&quot;@(() =&gt; MonthView_Click())&quot; @onclick:stopPropagation=&quot;true&quot;&gt;Month&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @switch (CurrentView)
  {
      case CalendarViewOption.MonthView:
          &lt;MonthViewComponent&gt;&lt;/MonthViewComponent&gt;
          break;
      case CalendarViewOption.DayView:  
          &lt;DayViewComponent&gt;&lt;/DayViewComponent&gt;
          break;
      
      case CalendarViewOption.WeekView:
          &lt;WeekViewComponent&gt;&lt;/WeekViewComponent&gt;
          break;
  
  }
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>body {
      margin: 0;
      padding: 0;
  }
  
  .maincontainer {
      background: #E7EAF6;
      display: grid;
      grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
      grid-template-rows: auto
  }
  
  .viewtitle {
      grid-column: 1/4;
      grid-row: 1;
      justify-self: center;
      padding: 5px 5px 5px 5px;
      color: darkblue;
      font-weight: bold;
      font-size: 16px;
  }
  
  .lbuttons {
      grid-column: 1/2;
      grid-row: 2;
      justify-self: start;
  }
  
  .mbuttons {
      grid-column: 2/3;
      grid-row: 2;
      justify-self: center;
  }
  
  .rbuttons {
      grid-column: 3/4;
      grid-row: 2;
      justify-self: end;
  }
  
  .button {
      background-color: black;
      color: white;
      border: 2px solid #555555;
      padding: 3px;
      margin: 0;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
      border-radius: 5px;
      cursor: pointer;
  }
  
  .button:hover {
      background-color: white;
      color: black;
  }
  
  .datelabel {
      color: black;
      font-weight: bold;
  }
  
  .dateinput {
      padding: 3px 3px;
      margin: 2px 0;
      border: 1px solid rgb(130, 128, 128);
      border-radius: 4px;
      box-sizing: border-box;
      cursor: pointer;
  }
  </code></pre>
  <p><strong>WeekView</strong></p>
  <pre><code>&lt;div class=&quot;calendar-container&quot;&gt;
  
      &lt;div class=&quot;header&quot;&gt;
          &lt;ul class=&quot;weekdays&quot;&gt;
              &lt;li&gt;Sun&lt;/li&gt;
              &lt;li&gt;Mon&lt;/li&gt;
              &lt;li&gt;Tue&lt;/li&gt;
              &lt;li&gt;Wed&lt;/li&gt;
              &lt;li&gt;Thu&lt;/li&gt;
              &lt;li&gt;Fri&lt;/li&gt;
              &lt;li&gt;Sat&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;ul class=&quot;daynumbers&quot;&gt;
              &lt;li&gt;20&lt;/li&gt;
              &lt;li&gt;21&lt;/li&gt;
              &lt;li&gt;22&lt;/li&gt;
              &lt;li&gt;23&lt;/li&gt;
              &lt;li&gt;24&lt;/li&gt;
              &lt;li&gt;25&lt;/li&gt;
              &lt;li&gt;26&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;timeslots-container&quot;&gt;
          &lt;ul class=&quot;timeslots&quot;&gt;
              &lt;li&gt;8&lt;sup&gt;am&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;9&lt;sup&gt;am&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;10&lt;sup&gt;am&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;11&lt;sup&gt;am&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;12&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;4&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;5&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;6&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;7&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;8&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;9&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
              &lt;li&gt;10&lt;sup&gt;pm&lt;/sup&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;event-container&quot;&gt;
          &lt;div class=&quot;slot slot-1&quot;&gt;
              &lt;div class=&quot;event-staus&quot;&gt;&lt;/div&gt;
              &lt;span&gt;Event A&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;slot slot-2&quot; style=&quot;height: 60px; grid-row: 1; grid-column: 1;&quot;&gt;
              &lt;div class=&quot;event-staus&quot;&gt;&lt;/div&gt;
              &lt;span&gt;Event A&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>body {
      margin: 0;
      padding: 0;
  }
  
  li {
      list-style: none;
  }
  
  ul {
      padding: 0;
      margin: 0;
  }
  
  .calendar-container {
      display: grid;
      grid-template-columns: 50px auto;
      grid-template-rows: auto;
      gap: 1px 1px;
      grid-template-areas:
      &quot;. header&quot;
      &quot;timeslots-container main&quot;;
      background: #325288;
  }
  
  .weekdays,
  .daynumbers {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
  }
  
  .daynumbers {
      min-height: 1em;
  }
  
  .weekdays {
      background: #19456B;
      color: white
  }
  
  .header {
      background-color: gainsboro;
      grid-area: header;
  }
  
  .timeslots-container {
      background-color: lightgray;
      grid-area: timeslots-container;
      align-items: center;
  }
  
  .timeslots {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  .timeslots li {
      min-height: 60px;
  }
  
  .timeslots li::after {
      content: &quot;&quot;;
      position: absolute;
      left: 10px;
      width: 100%;
      height: 1px;
      background: lightgray;
      z-index: 1;
  }
  
  .event-container {
      display: grid;
      grid-template-columns: repeat(7, auto);
      grid-template-rows: repeat(48, auto);
      grid-area: main;
      position: relative;
  }
  
  .slot {
      position: absolute;
      background: darkcyan;
      border-radius: 5px;
      z-index: 5;
      color: white;
      font-size: 12px;
  }
  
  .slot-1 {
      height: 30px;
      grid-row: 106;
      grid-column: 3;
  }
  </code></pre>
  <p><strong>Screenshot</strong></p>
  <p><img src="https://i.stack.imgur.com/kRqxv.png" alt="enter image description here" /></p>