html - IE11 flexbox 不考虑换行文本的高度

Question

我知道最终的答案可能是“IE 糟透了，而你是 S.O.L”。但我不知道如何让这个 flex 布局在 IE11 中正常工作，希望这里的人能理解为什么布局被破坏/有一些聪明的技巧来修复它。在 IE 中，当文本换行时，文本上的边框会折叠成只包含第一行。

最终目标是让文本底部对齐并让 svg 填充剩余空间，但要灵活(我不想在 svg 或文本元素上使用设置的高度)因为这是我的网络组件正在进行中。

div{
  box-sizing:border-box;
  background:#fafafa;
  border-radius:3px;
  width: 100px;
  height: 100px;   
  padding:5px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:stretch;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
h5{
  flex-shrink:1;
  text-align:center;
  margin:5px auto;
  max-width:100%;
  border:1px solid #000;
}
span{
  display:block;
  display:flex;
  align-self:stretch;
}
svg{
  max-height:100%;
  max-width:100%;
  flex-grow:1;
}

<div>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.71 62.15"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>myThermometer</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M34,45.55V36.82a2.92,2.92,0,1,0-5.84,0v8.73a6.68,6.68,0,1,0,5.84,0Z"></path><path class="cls-1" d="M38.11,43.46V7a7,7,0,1,0-14,0V43.46a10.67,10.67,0,1,0,14,0ZM31.1,60a8.48,8.48,0,0,1-4.83-15.45v-3.2h1v-1h-1V37.72h1v-1h-1V34.11h2.06a4.08,4.08,0,0,1,1.07-.76v-.22H26.27V30.51H29.4v-1H26.27V26.91H29.4v-1H26.27V23.3H29.4v-1H26.27V19.7H29.4v-1H26.27V16.1H29.4v-1H26.27V12.49H29.4v-1H26.27V8.89H29.4v-1H26.27V7a4.83,4.83,0,1,1,9.66,0v37.5A8.48,8.48,0,0,1,31.1,60Z"></path><path class="cls-1" d="M49.34,44.75l-.91-1.31L50,43a.52.52,0,0,0,.37-.64A.53.53,0,0,0,49.7,42l-1.29.35.46-1.26a.53.53,0,0,0-.32-.67.52.52,0,0,0-.67.32L47.43,42l-.77-1.09a.52.52,0,0,0-.86.59l.92,1.32-1.55.41a.52.52,0,1,0,.27,1l1.3-.35-.46,1.26a.52.52,0,0,0,1,.36l.46-1.26.77,1.09a.52.52,0,1,0,.85-.59Z"></path><path class="cls-1" d="M50.57,13.6l-1.18-1.69,2-.53a.67.67,0,1,0-.35-1.3l-1.66.45L50,8.9A.68.68,0,0,0,49.55,8a.67.67,0,0,0-.86.4l-.59,1.63-1-1.42a.67.67,0,1,0-1.1.77l1.18,1.69-2,.53A.68.68,0,1,0,45.55,13l1.67-.45-.6,1.62A.69.69,0,0,0,47,15a.68.68,0,0,0,.86-.41L48.48,13l1,1.41a.68.68,0,0,0,.94.17A.66.66,0,0,0,50.57,13.6Z"></path><path class="cls-1" d="M59.93,31.91l-1.61-2.3L61,28.89a.92.92,0,1,0-.48-1.77l-2.26.61.8-2.21a.91.91,0,0,0-1.72-.62l-.8,2.2-1.35-1.92a.92.92,0,1,0-1.5,1.05l1.61,2.29-2.71.73A.9.9,0,0,0,52,30.37.92.92,0,0,0,53.1,31l2.26-.6-.8,2.2a.92.92,0,1,0,1.72.63L57.09,31,58.43,33a.92.92,0,0,0,1.28.22A.91.91,0,0,0,59.93,31.91Z"></path><path class="cls-1" d="M14.47,13.41l.92,1.3-1.55.42a.52.52,0,0,0,.27,1l1.3-.35L15,17.05a.52.52,0,1,0,1,.36l.46-1.26.77,1.1a.52.52,0,0,0,.85-.61l-.91-1.3,1.54-.42a.52.52,0,0,0,.37-.64.53.53,0,0,0-.64-.37l-1.29.35L17.54,13a.54.54,0,0,0-.32-.67.52.52,0,0,0-.67.31l-.46,1.26-.76-1.1a.53.53,0,0,0-.73-.12A.52.52,0,0,0,14.47,13.41Z"></path><path class="cls-1" d="M13.13,36.62l1.18,1.69-2,.53a.68.68,0,0,0,.35,1.31l1.67-.45-.59,1.62a.67.67,0,0,0,1.26.46l.59-1.62,1,1.41a.68.68,0,1,0,1.11-.77l-1.18-1.69,2-.53a.67.67,0,0,0-.35-1.3l-1.67.45.59-1.63a.67.67,0,0,0-.4-.86.68.68,0,0,0-.87.4l-.59,1.63-1-1.42a.67.67,0,0,0-.94-.16A.66.66,0,0,0,13.13,36.62Z"></path><path class="cls-1" d="M1.78,21.45l1.6,2.3-2.7.72a.92.92,0,1,0,.47,1.77l2.27-.61-.8,2.21a.91.91,0,1,0,1.72.62l.8-2.2,1.35,1.92a.91.91,0,0,0,1.27.23A.92.92,0,0,0,8,27.13L6.38,24.84l2.7-.73a.91.91,0,1,0-.47-1.76L6.34,23l.81-2.2a.93.93,0,0,0-.55-1.18.92.92,0,0,0-1.17.55l-.81,2.21L3.28,20.4A.92.92,0,0,0,2,20.18.91.91,0,0,0,1.78,21.45Z"></path></g></g></svg>
  </span>
  <h5>
  Climate Controlled
  </h5>
  </div>

Answer 1

现在在 IE 中试试这个。它应该如你所愿地工作。我删除了 box-sizing 属性并为 h5 元素添加了 100% 的高度。

div{
  background:#fafafa;
  border-radius:3px;
  width: 100px;
  height: 100px;   
  padding:5px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:stretch;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
h5{
  flex-shrink:1;
  text-align:center;
  margin:5px auto;
  max-width:100%;
  border:1px solid #000;
  height : 100%;
}
span{
  display:block;
  display:flex;
  align-self:stretch;
}
svg{
  max-height:100%;
  max-width:100%;
  flex-grow:1;
}

<div>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.71 62.15"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>myThermometer</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M34,45.55V36.82a2.92,2.92,0,1,0-5.84,0v8.73a6.68,6.68,0,1,0,5.84,0Z"></path><path class="cls-1" d="M38.11,43.46V7a7,7,0,1,0-14,0V43.46a10.67,10.67,0,1,0,14,0ZM31.1,60a8.48,8.48,0,0,1-4.83-15.45v-3.2h1v-1h-1V37.72h1v-1h-1V34.11h2.06a4.08,4.08,0,0,1,1.07-.76v-.22H26.27V30.51H29.4v-1H26.27V26.91H29.4v-1H26.27V23.3H29.4v-1H26.27V19.7H29.4v-1H26.27V16.1H29.4v-1H26.27V12.49H29.4v-1H26.27V8.89H29.4v-1H26.27V7a4.83,4.83,0,1,1,9.66,0v37.5A8.48,8.48,0,0,1,31.1,60Z"></path><path class="cls-1" d="M49.34,44.75l-.91-1.31L50,43a.52.52,0,0,0,.37-.64A.53.53,0,0,0,49.7,42l-1.29.35.46-1.26a.53.53,0,0,0-.32-.67.52.52,0,0,0-.67.32L47.43,42l-.77-1.09a.52.52,0,0,0-.86.59l.92,1.32-1.55.41a.52.52,0,1,0,.27,1l1.3-.35-.46,1.26a.52.52,0,0,0,1,.36l.46-1.26.77,1.09a.52.52,0,1,0,.85-.59Z"></path><path class="cls-1" d="M50.57,13.6l-1.18-1.69,2-.53a.67.67,0,1,0-.35-1.3l-1.66.45L50,8.9A.68.68,0,0,0,49.55,8a.67.67,0,0,0-.86.4l-.59,1.63-1-1.42a.67.67,0,1,0-1.1.77l1.18,1.69-2,.53A.68.68,0,1,0,45.55,13l1.67-.45-.6,1.62A.69.69,0,0,0,47,15a.68.68,0,0,0,.86-.41L48.48,13l1,1.41a.68.68,0,0,0,.94.17A.66.66,0,0,0,50.57,13.6Z"></path><path class="cls-1" d="M59.93,31.91l-1.61-2.3L61,28.89a.92.92,0,1,0-.48-1.77l-2.26.61.8-2.21a.91.91,0,0,0-1.72-.62l-.8,2.2-1.35-1.92a.92.92,0,1,0-1.5,1.05l1.61,2.29-2.71.73A.9.9,0,0,0,52,30.37.92.92,0,0,0,53.1,31l2.26-.6-.8,2.2a.92.92,0,1,0,1.72.63L57.09,31,58.43,33a.92.92,0,0,0,1.28.22A.91.91,0,0,0,59.93,31.91Z"></path><path class="cls-1" d="M14.47,13.41l.92,1.3-1.55.42a.52.52,0,0,0,.27,1l1.3-.35L15,17.05a.52.52,0,1,0,1,.36l.46-1.26.77,1.1a.52.52,0,0,0,.85-.61l-.91-1.3,1.54-.42a.52.52,0,0,0,.37-.64.53.53,0,0,0-.64-.37l-1.29.35L17.54,13a.54.54,0,0,0-.32-.67.52.52,0,0,0-.67.31l-.46,1.26-.76-1.1a.53.53,0,0,0-.73-.12A.52.52,0,0,0,14.47,13.41Z"></path><path class="cls-1" d="M13.13,36.62l1.18,1.69-2,.53a.68.68,0,0,0,.35,1.31l1.67-.45-.59,1.62a.67.67,0,0,0,1.26.46l.59-1.62,1,1.41a.68.68,0,1,0,1.11-.77l-1.18-1.69,2-.53a.67.67,0,0,0-.35-1.3l-1.67.45.59-1.63a.67.67,0,0,0-.4-.86.68.68,0,0,0-.87.4l-.59,1.63-1-1.42a.67.67,0,0,0-.94-.16A.66.66,0,0,0,13.13,36.62Z"></path><path class="cls-1" d="M1.78,21.45l1.6,2.3-2.7.72a.92.92,0,1,0,.47,1.77l2.27-.61-.8,2.21a.91.91,0,1,0,1.72.62l.8-2.2,1.35,1.92a.91.91,0,0,0,1.27.23A.92.92,0,0,0,8,27.13L6.38,24.84l2.7-.73a.91.91,0,1,0-.47-1.76L6.34,23l.81-2.2a.93.93,0,0,0-.55-1.18.92.92,0,0,0-1.17.55l-.81,2.21L3.28,20.4A.92.92,0,0,0,2,20.18.91.91,0,0,0,1.78,21.45Z"></path></g></g></svg>
  </span>
  <h5>
  Climate Controlled
  </h5>
  </div>