html - MS Edge 无法正确呈现嵌套的 Flex 布局

Question

这是显示我遇到的问题的布局，也可以在 https://jsfiddle.net/51z7vt23/ 找到

.box {
     width: auto;
     height: 40px;
     border: 1px solid red;
     flex: 0 0 auto;
     position: relative;
}
.txt {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 18px;
     flex: 1 0 auto;
     width: 0px;
     position: relative;
}
.container {
     font-size: 16px;
     line-height: 3rem;
     box-sizing: border-box;
     position: relative;
     display: flex;
     padding: 0;
     margin: 0;
     max-width: 100%;
     text-align: start;
     flex: 0 0 auto;
      width: auto;
      height: auto;
}
.container2 {
      font-size: 16px;
      line-height: 3rem;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex: 1 0 auto;
      padding: 0;
      margin: 0;
      max-width: 100%;
      text-align: start;
      align-items: center;
      height: auto;           
}
.parent {
       width: 400px;
       border: 1px solid lime;
}

<div class="parent">
     <div class="container">
          <div class="container2">
               <div class="box">YES</div>
                <div class="txt">REALLY REALLLY REAAAAALLLY REAAAAALLLY REAAAAALLLY BEAUTIFULL TEXT, PERHAPS THE MOST BEAUTIFULL TEXT IN THE WORLD</div>
           </div>
           <div class="box">NO</div>
     </div>
</div>

这段代码在 Chrome 上运行良好，并提供了预期的结果: 但是使用 MS Edge 我可以看到“否”框被推出容器边界:

我使用的 MS Edge 版本是 44.17763.771.0

有谁知道如何使用 MS EDGE 使其按预期工作？

Answer 1

您可以删除 .container2 上的 max-width:100%; ，这太多了，因为宽度要与另一个元素共享。您可以将它变成 min-width:100%;+/或 overflow:hidden; 作为其大小的回流/重新计算。

下面的演示

.box {
  width: auto;
  height: 40px;
  border: 1px solid red;
  flex: 0 0 auto;
  position: relative;
}

.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  flex: 1 0 auto;
  width: 0px;
  position: relative;
}

.container {
  font-size: 16px;
  line-height: 3rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
  padding: 0;
  margin: 0;
  max-width: 100%;
  text-align: start;
  flex: 0 0 auto;
  width: auto;
  height: auto;
}

.container2 {
  font-size: 16px;
  line-height: 3rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
  text-align: start;
  align-items: center;
  height: auto;
  min-width: 0;
  overflow: hidden;
}

.parent {
  width: 400px;
  border: 1px solid lime;
}

<div class="parent">
  <div class="container">
    <div class="container2">
      <div class="box">YES</div>
      <div class="txt">REALLY REALLLY REAAAAALLLY REAAAAALLLY REAAAAALLLY BEAUTIFULL TEXT, PERHAPS THE MOST BEAUTIFULL TEXT IN THE WORLD</div>
    </div>
    <div class="box">NO</div>
  </div>
</div>

fork https://jsfiddle.net/8f9suq7k/