如何让svg适合flexbox-direction：column的父容器？

Question

第一个带有“flex-direction：column”的面板在Chrome和Firefox / IE11中看起来有所不同，这是Chrome浏览器中看起来最好的一个，当svg收缩并与其下面的文本共享时，我的正确行为（文字不收缩），在Firefox / IE11中svg溢出父容器并在其下移动文本。如何使所有浏览器看起来都一样？

预期布局（Chrome）： https://api.monosnap.com/rpc/file/download?id=EG8clzQ6pk21tAJQaYBlx3Lax1Z17c

不可思议的布局（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>