How to make svg fits parent container with flexbox-direction: column?

Question

Problem that the first panel with "flex-direction: column" looks different in Chrome and Firefox/IE11, the best one as it looks in Chrome, and right behaviour for me when svg shrinks and shares place with the text under it (text doesn't shrink), in Firefox/IE11 svg overflows parent container and shifts text under it. How to make it look the same for all browsers?

Expected layout (Chrome): https://api.monosnap.com/rpc/file/download?id=EG8clzQ6pk21tAJQaYBlx3Lax1Z17c

Unxpected layout (Firefox/IE11): https://api.monosnap.com/rpc/file/download?id=2UYheVOHBuulI5kzqir1krs6imMcql

.panel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 1;
  background: grey;
  /* overflow: hidden; */
}

.panel4 {
   height: 50px;
   width: 50px; 
   margin-bottom: 10px;
}

.panel1 {
   height: 50px;
   width: 150px; 
   margin-bottom: 10px;
}

.panel2 {
   height: 150px;
   width: 150px; 
   margin-bottom: 10px;
}

.panel3 {
   height: 150px;
   width: 50px; 
   margin-bottom: 10px;
}

.flex-row {
  flex-direction: row;
}

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

.subpanel-svg {
  display: flex;
  height: 100%;
}

.subpanel-svg div {
  display: flex;
}

.subpanel-svg svg {
  height: 100%;
  width: 100%;
}

.subpanel-other {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
}

.subpanel-text {
  white-space: nowrap;
  font-size: 10px;
}

<div class="panel panel4 flex-column">
  <div class="subpanel subpanel-svg">
    <div>
    <svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    </div>
  </div>
  <div class="subpanel-other">
    <div class="subpanel-text">some text</div>
    <div class="subpanel-text">some text</div>
  </div>
</div>

<div class="panel panel1 flex-row">
  <div class="subpanel subpanel-svg">
    <div>
    <svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    </div>
  </div>
  <div class="subpanel-other">
    <div class="subpanel-text">some text</div>
    <div class="subpanel-text">some text</div>
  </div>
</div>

<div class="panel panel2 flex-row">
  <div class="subpanel subpanel-svg">
    <div>
    <svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    </div>
  </div>
  <div class="subpanel-other">
    <div class="subpanel-text">some text</div>
    <div class="subpanel-text">some text</div>
  </div>
</div>

<div class="panel panel3 flex-row">
  <div class="subpanel subpanel-svg">
    <div>
    <svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    </div>
  </div>
  <div class="subpanel-other">
    <div class="subpanel-text">some text</div>
    <div class="subpanel-text">some text</div>
  </div>
</div>