某个位置内的弯曲内容宽度未正确计算：IE11中的固定容器

Question

我正在构建一个自定义工具提示，该提示使用position: fixed以及动态的top和left来跟随您的鼠标光标。工具提示具有使用flexbox构建的相对复杂的布局。我在IE11上遇到了问题（否则，它可以使用autoprefixer很好地支持flexbox），其中工具提示的宽度会逐渐缩小，好像没有内容一样。

我做了一个Codepen，除去了最基本的Bootstrap布局和CSS之外的所有实现细节，但问题仍然存在。您可以在https://codepen.io/ryangiglio/pen/xajLJr上看到它的运行情况。这是代码：

HTML

<!-- Regular content -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 text-center">
      Column
    </div>
    <div class="col-4 text-center">
      Column
    </div>
    <div class="col-4 text-center">
      Column
    </div>
  </div>
</div>

<!-- Tooltip content -->
<div class="custom-tooltip">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 text-center">
        Tooltip Title
      </div>
    </div>
    <div class="row">
      <div class="col-4 text-center">
        Column
      </div>
      <div class="col-4 text-center">
        Column
      </div>
      <div class="col-4 text-center">
        Column
      </div>
    </div>
  </div>
</div>

CSS

.custom-tooltip {
  position: fixed;
  top: 50px;
  left: 50px;
  background: white;
  box-shadow: 0 0 5px 1px black;
}

这就是在Chrome中的外观

以及它在IE11中的外观

Answer 1

您提供的链接无效，因为我不是专业会员。

另一方面，我不确定，但是可能是当您设置框阴影属性时，它会更改显示，但是我不确定并想测试该理论，但不能。
/> ---编辑
请尝试以下代码，同时还要确保正确设置flex-direction属性。

div.custom-tooltip{ 
  display: flex; 
  flex-direction:column; 
} 
div.row{ 
  display: flex; 
  flex-direction:row; 
} 

---

---编辑答复---

/* 
I set the tooltip box containers 
width to be a percentage, I don't
know if this a documented issue 
with ie11 or not, where ie 11
doesn't realize that flex is being 
used on a fixed element and goes with
default values for width.  

*/
div[data-tooltip-boxwidth="300"] {
 width: 20%;
}