Internet Explorer неправильно масштабирует SVG внутри flex-box - PullRequest
Новая
       18

Internet Explorer неправильно масштабирует SVG внутри flex-box

0 голосов
/ 14 сентября 2018

У меня есть встроенный svg с viewBox. Когда svg обернут в div, который затем находится внутри flexbox, размеры не рассчитываются должным образом IE (11). Вот пример проблемы: HTML: 

<div id="main">
  <div>
      <svg viewBox="0 0 50 100">
          <path d="m0,-5 l40, 55 l-40,55" />
      </svg>
  </div>
</div>

CSS: 

#main {
  background: blue;
  width: 100%;
  height: 100px;

  display: flex;

}


#main > div {

  height: 80%;
  background: red;
  overflow: hidden;
}

svg {
  stroke: black;
  fill: none;
  stroke-width: 3px;
  height: 100%;
}

Тот же код на JSbin: JSBin

Например, в chrome он работает как положено. Мне нужен адаптивный дизайн, который также работает в IE, и так как я использую сетку начальной загрузки (которая является просто flexbox), мне нужно решение для этого. Спасибо.

...