Разница переполнения между Chrome и Edge - PullRequest
Новая
       6

Разница переполнения между Chrome и Edge

0 голосов
/ 22 мая 2018

Я заметил разницу между Chrome и Edge в отношении поведения переполнения.

Как вы видите, запустив следующий код, в Chrome он показывает только вертикальную полосу прокрутки (на мой взгляд, правильно), тогда как в Edge есть обе полосы прокрутки.

Есть ли причина для этого?Как заставить Edge вести себя так же, как Chrome?

Спасибо! 

.container1 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container2 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container3 {
  max-height: 150px;
  overflow: auto;
}

.content {
  width: 500px;
  height: 200px;
  background-color: blue;
}
<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="content"></div>
    </div>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 22 мая 2018

Вот что я думаю:

  • Когда происходит переполнение (потому что height: 200px на элементе .content выше, чем max-height: 150px на родительском элементе),создается вертикальная полоса прокрутки.

  • Эта полоса прокрутки фактически занимает ширину.Элемент .content имеет значение width: 500px.Но как только полоса прокрутки сгенерирована, ширина увеличивается до 517px в Chrome.Обратите внимание, что ширина полосы прокрутки варьируется в зависимости от браузера.

  • Похоже, что Chrome учитывает или просто игнорирует ширину вертикальной полосы прокрутки.Он воздерживается от запуска горизонтальной полосы прокрутки. Похоже, что Edge рассматривает ширину вертикальной полосы прокрутки как переполнение и поэтому запускает горизонтальную полосу прокрутки.

  • Причин различий в поведении может быть несколько.включая другой порядок рендеринга элементов и объектов.

Ясно одно: если переместить width: 500px от .content к родителю, проблема горизонтальной прокрутки будет решена. 

.container1 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container2 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container3 {
  max-height: 150px;
  overflow: auto;
  width: 500px; /* new */
}

.content {
  /* width: 500px; */
  height: 200px;
  background-color: blue;
}
<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="content"></div>
    </div>
  </div>
</div>

jsFiddle demo

0 голосов
/ 23 мая 2018

После многих попыток я нашел обходной путь, удалив align-items: flex-start и заменив display: flex на display: inline-flex.Вот новый код: 

.container1 {
  display: inline-flex;
  flex-flow: column;
}

.container2 {
  display: inline-flex;
  flex-flow: column;
}

.container3 {
  max-height: 150px;
  overflow: auto;
}

.content {
  width: 500px;
  height: 200px;
  background-color: blue;
}
<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="content"></div>
    </div>
  </div>
</div>

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 22 мая 2018

Попробуйте это: overflow-y: auto;

Ссылка: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

...