Flexbox и SVG контент - PullRequest
Новая
       9

Flexbox и SVG контент

0 голосов
/ 30 января 2020 
  <body>
    <div class="home">
      <div class="title-header">
        <div>HEADER</div>
      </div>
      <div class="main">
        <div class="left-pane">
          <div class="content">
            <!-- SVG overflows the container on resize -->
            <svg height="100%" width="100%" viewbox="0 0 200 200" preserveAspectRatio="xMidYMin meet">
              <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            </svg>   

            <!-- Using a Div instead works great!
              <div style="width: 100%; height: 100%; background-color: white">
              </div> -->
          </div>          
        </div>
        <div id="rightpane" class="right-pane">
          <button onClick="toggleSize()">Resize</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>FOOTER</div>
    </div>
  </body>
</html>


.home {
  display: flex;
  flex-direction: column;
  width: 1000px;
  height: 800px;
  background-color: lightgray;
}

.title-header {
  width: 100%;
  display: flex;
  flex: 0 0 35px;
  height: 35px;
  background-color: lightblue;
  align-items: center;
  justify-content: center;
}

.main {
  display: flex;
  width: 100%;
  flex: 1;
  background-color: lightgreen;
}

.left-pane {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: white;
}

.right-pane {
  flex: 0 0 350px;
  width: 350px;
  border-left: 1px solid lightgray;
  &.min {
    flex: 0 0 100px;
    width: 100px;
  }
}

.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.footer {
  display: flex;
  position: absolute;
  top: 810px;
  left: 0px;
  flex: 0 0 35px;
  width: 1000px;
  height: 35px;
  border: 1px solid black;
  align-items: center;
  justify-items: center;
}

Пример здесь: https://codepen.io/johnny4111/pen/ZEYNqyq

У меня есть структура, как в примере, это контейнер с левой и правой панелью. Правая панель может быть свернута программно. Левая панель имеет SVG, настроенный на 100% высоты и 100% ширины. На левой панели установлено значение flex-grow, равное 1, поэтому оно занимает 100% свободной высоты, но не должно выходить за границы родительского элемента div.

Ожидается, когда правая панель свернута, а левая Панель расширяет свою ширину, чтобы занять доступное в настоящее время свободное пространство, которое SVG должен по-прежнему ограничивать доступной высотой (высота 100%), поскольку высота не изменилась, а только ширина. Однако на самом деле он переполняет div. Внизу находится абсолютно позиционированный нижний колонтитул, поэтому вы можете видеть, что он переполнен.

Есть идеи, в чем проблема? Если я использую обычный div, установленный на 100% ширины, 100% высоты вместо SVG, это работает без каких-либо проблем. Div не переполняет своего родителя.

...