Горизонтальная прокрутка не работает на элементе div

Question

@ Здесь я пытаюсь создать горизонтальную прокрутку для элемента div для моего приложения. Элемент div состоит из элемента ul li и некоторых других тегов div для моего требования. Элементы Ul li динамически добавляются в родительский элемент div.

Несмотря на то, что вертикальная прокрутка могла работать правильно, моя горизонтальная прокрутка отображается с помощью overflow-x: scroll. Я не могу прокрутить его, элементы ul li искажаются. Я также установил предопределенную ширину 700 пикселей для контейнера div. Это как горизонтальная прокрутка отключена. Я не использую переполнение где-либо еще в приложении

<div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length>0 && !isLoading">
  <ul>
    <li *ngFor="let emp of empArr">
      <div class="user">
       <div class="name">{{emp.empname}}</div>
        <div class="role">{{emp.empdesgname}}</div>
      </div>
    </li>
  </ul>
</div>

Мой CSS файл:

.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%);
}

Answer 1

применить свойство max-width как 64% и переполнение: auto

Answer 2

Глядя на ваш код, при условии, что overflow-x: scroll !important; большой no no от меня, это будет последний вариант для вас, чтобы использовать.

сейчас подходит к вашему требованию, вам нужно специально предоставить overflow-x: scroll если вы дадите overflow:auto, он автоматически даст вам свиток, когда это будет необходимо.

теперь, когда это будет ??

, когда height и width больше размера браузера, когда вы получите функцию scrolling.

, если вам нужна прокрутка в пределах размера браузера, уменьшите ширину container и примените overflow:auto;, который должен дать вам свиток на месте.

вот пример того, что я говорю:

так что это значит, когда вы хотите прокрутить в браузере, то вы должны иметь класс child, и ширина этого класса должна быть меньше по сравнению с содержимым, чтобы он мог переполниться.

.org-chart {
  display: flex;
  justify-content: center;
  left: 29px;
  position: relative;
  overflow: auto;
  border: 1px solid black;
  /*Main container */
  height: 300px;
  width: 65%;
}

.content {
  width: 100%;
  /* you should have another width inside main container */
  border: 1px solid red;
}

<div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length>0 && !isLoading">
  <ul>
    <li *ngFor="let emp of empArr">
      <div class="user">
        <div class="name">{{emp.empname}}</div>
        <div class="role">{{emp.empdesgname}}</div>
        <div class="content">Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last
          on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it,
          text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment
          for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can
          use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH
          of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below.</div>
      </div>
    </li>
  </ul>
</div>