title: Horizontal scroll not working on a div element
body: <p>@Here, I'm trying to create horizontal scrolling for a div element for my application. The div element consists of ul li element and some other div tags for my requirement. The Ul li elements are dynamically added inside the parent div element. </p>
  
  <p>Although I could get the vertical scrolling working properly and my horizontal scrolling is displayed using overflow-x: scroll. I am not able to scroll it, the ul li elements gets distorted. I have set a predefined width of 700px for the div container also. Its like the horizontal scrolling is disabled. I am not using overflow anywhere else in the application</p>
  
  <pre><code>&lt;div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length&gt;0 &amp;&amp; !isLoading"&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let emp of empArr"&gt;
        &lt;div class="user"&gt;
         &lt;div class="name"&gt;{{emp.empname}}&lt;/div&gt;
          &lt;div class="role"&gt;{{emp.empdesgname}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS file:</p>
  
  <pre><code>.org-chart {
      display: flex;
      justify-content: center;
      left: 29px;
      position: relative;
      overflow-x: scroll !important;
      overflow-y: scroll;
      height: 400px;
      width: 65%;
      transform: translateY(12%);
  }
  </code></pre>