poorly behaved svg in flexbox

index.html

<p>The blue boxes are SVG elements, which should stretch to fill their container, via <code>preserveAspectRatio="none"</code> and <code>viewBox="0 0 100 100"</code>.</p>
<p>In the fifth example, the SVG escapes the height that the flexbox layout should be giving it. It's broken in both FireFox and Chrome, in slightly different ways.</p>
<p>The issue only appears when the SVG is getting squished vertically. With tall containers, the SVG gets horizontally compressed just fine.</p>
<p>In the last example, <code>overflow: hidden</code> on the flex parent is convincing FireFox to squish the SVG to size. However, Chrome just clips it in this case.</p>

<input id="mode" type="checkbox" >
<label for="mode">
  <span class="button" id="wide">wide</span>
  <span class="button" id="tall">tall</span>
</label>

<div id="demos">

  <div class="demo">
    <svg preserveAspectRatio="none" viewBox="0 0 100 100" class="right">
      <text dy="30">just contained</text>
    </svg>
  </div>

  <div class="demo flex-cols">
    <div class="left">
      left col
    </div>
    <svg preserveAspectRatio="none" viewbox="0 0 100 100" class="right">
      <text dy="30">flex cols</text>
    </svg>
  </div>

  <div class="demo flex-rows">
    <svg preserveAspectRatio="none" viewbox="0 0 100 100" class="top">
      <text dy="30">flex rows</text>
    </svg>
    <div class="bottom">
      bottom row
    </div>
  </div>

  <div class="demo flex-cols">
    <div class="left">
      left col
    </div>
    <div class="flex-rows right">
      <svg preserveAspectRatio="none" viewbox="0 0 100 100" class="top">
        <text dy="30">nested</text>
        <text dy="60">cols(rows())</text>
      </svg>
      <div class="bottom">
        bottom row
      </div>
    </div>
  </div>

  <div class="demo flex-rows">
    <div class="flex-cols top">
      <div class="left">
        left col
      </div>
      <svg preserveAspectRatio="none" viewbox="0 0 100 100" class="right">
        <text dy="30">nested</text>
        <text dy="60">rows(cols())</text>
      </svg>
    </div>
    <div class="bottom">
      bottom row
    </div>
  </div>

  <div class="demo flex-rows">
    <div class="flex-cols top hide-overflow">
      <div class="left">
        left col
      </div>
      <svg preserveAspectRatio="none" viewbox="0 0 100 100" class="right">
        <text dy="30">nested hidden</text>
        <text dy="60">rows(cols())</text>
      </svg>
    </div>
    <div class="bottom">
      bottom row
    </div>
  </div>

</div>

poorly-behaved-svg-in-flexbox.markdown

poorly behaved svg in flexbox

A Pen by uniphil on CodePen.

License.

style.css

body {
  font-family: sans-serif;
}
[type=checkbox] {
  display: none;
}
label {
  border: 3px solid #3d6;
  border-radius: 0.5em;
  display: inline-block;
  margin: 2em 0.5em;
}
.button {
  background: #3d6;
  border-radius: 0.3em;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
  text-align: center;
  width: 4em;
}
[type=checkbox]:checked ~ label #wide,
[type=checkbox]:not(:checked) ~ label #tall {
  background: none;
  color: #063;
  font-weight: normal;
}

#demos {
  display: flex;
  flex-wrap: wrap;
}

.demo {
  border: 2px dashed #000;
  height: 100px;
  width: 200px;
  margin: 1em 0.5em 5em;
}

[type=checkbox]:checked ~ #demos .demo {
  height: 300px;
  width: 150px;
}

svg {
  background: rgba(0, 0, 200, 0.5);
  height: 100%;
  width: 100%;
}
svg text {
  fill: #fff;
  font-size: 12px;
}

.flex-cols {
  display: flex;
}

.left {
  background: rgba(255, 186, 0, 0.5);
  flex: 0 0 3em;
}

.right {
  flex: 1 1 auto;
}

.flex-rows {
  display: flex;
  flex-direction: column;
}

.top {
  flex: 1 1 auto;
}

.bottom {
  background: rgba(255,64, 128, 0.5);
  flex: 0 0 2em;
}

.hide-overflow {
  overflow: hidden;
}