0

A SVG element with a viewBox scale until it change the size of its container.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

footer, article, nav {
  border: 1px solid black;
  padding: 0.25em;
  margin: 0.25em;
  border-radius: 0.25em;
}

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

section{
  display: flex;
  flex: 1;
}

nav{
  flex: 1;
}

article {
  flex: 5;
}

footer {
  height: 100px;
}

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


<html>

  <head>
    <meta charset="utf-8">
    <title>Svg test</title>
  </head>

  <body>
    <div class="main">
      <section>
        <nav>Nav</nav>
        <article>
          <svg id="svgMap" xmlns="http://www.w3.org/2000/svg" xmlns:map="http:rsvg.org/dtd/map" viewBox="0 0 10 10"></svg></article>
      </section>
      <footer>Footer</footer>
    </div>
  </body>

</html>

DEMO

Is that fixable?

Expected result

blow
  • 12,811
  • 24
  • 75
  • 112

0 Answers0