Flex-Basis：0％会导致IE11中出现错误的溢出

2 回答

• 3

  请注意，这个答案是在问题2的更新之前发布的，这使得它部分无效，但我现在暂时离开，有人可能需要它 .

  经过大量的反复试验后，我想出了这个设置，我的目标是让IE尽可能地模仿其余的浏览器行为 .

  在元素换行之前，IE需要在可破坏的's parent, so the text won' t折叠为0宽度的最小宽度，并且因为flex-basis通常需要 auto 但是在可破坏的父级上是 0px ，flex-grow需要在某处5 .

  我使用仅IE11选择器（我在this answer of mine中显示）添加了以下规则 .

  _:-ms-fullscreen, :root .flex-child {
    flex-basis: auto;
  }
  _:-ms-fullscreen, :root .child-3 {
    flex: 5 0 0px;
    min-width: 80px;
  }
  

  Updated codepen

  堆栈代码段

  .wrapper {
    width: 80%;
  }
  
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .flex-child {
    flex: 1 0 0%;
    white-space: nowrap;
    padding: 5px;
  }
  
  _:-ms-fullscreen, :root .flex-child {
    flex-basis: auto;
  }
  _:-ms-fullscreen, :root .child-3 {
    flex: 5 0 0px;
    min-width: 80px;
  }
  
  .text-break {
    white-space: pre-wrap;
  }
  
  /*Add backgrounds for display*/
  .child-1 {
    background-color: pink;
  }
  .child-2 {
    background-color: lightblue;
  }
  .child-3 {
    background-color: lightgreen;
  }
  

  <div class="wrapper">
    <div class="flex-container">
      <div class="flex-child child-1">
        <div>This text should not overlay other flex-children.</div>
      </div>
      <div class="flex-child child-2">
        <div>This text should not overlay other flex-children.</div>
      </div>
      <div class="flex-child child-3">
        <div class="text-break">This text should break on new lines when the container shrinks down</div>
      </div>
    </div>
  </div>
  

  回复于 2024-04-24T23:50:16+08:00
• 1

  这是 NOT a首选解决方案，因为它使用Javascript . 但是，它的工作原理 .

  在创建所有flex-children之后，每当屏幕大小发生变化时，检查每个flex-child的宽度是否小于其内容的宽度（为了使其工作，内容必须用 display: table-cell 包装） . 如果是这样，请为flex-child添加一个等于其内容宽度的最小宽度 . 添加最小宽度后，无需再次进行计算，因此不再检查屏幕大小何时更改 . 只在IE11上执行此操作 .

  我使用jquery来实现这个解决方案 .

  HTML：

  <div class="flex-container">
      <div id="1" class="flex-child child-1">
          <div class="content-container">This text should not overlay other flex-children.</div>
      </div>
      <div id="2" class="flex-child child-2">
          <div class="content-container">This text should not overlay other flex-children.</div>
      </div>
      <div id="3" class="flex-child child-3">
          <div class="content-container">
              <div class="text-break">This text should break on new lines when the container shrinks down</div>
              <div>This text should not break on new lines</div>
          </div>
      </div>
  </div>
  

  CSS：

  .flex-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
  }
  
  .flex-child {
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 0%;
      white-space: nowrap;
      padding: 5px;
  }
  
  .text-break {
      white-space: pre-wrap;
  }
  
  .content-container {
      display: table-cell;
  }
  

  jQuery的：

  if (!!window.MSInputMethodContext && !!document.documentMode) {//if IE11
      $(".flex-child").each(function (i, elem) {
          var $flex_child = $(elem);
          var child_id = $flex_child.attr("id");
  
          //add resize event to window
          $(window).on("resize." + child_id, function () {
              var width_of_flex_child = $flex_child.outerWidth();
              var content_width = $flex_child.children(".content-container").outerWidth();
  
              if (width_of_flex_child < content_width) {
                  $flex_child.css("min-width", content_width + "px");
  
                  //remove event
                  $(window).off("resize." + child_id);
              }
          }).trigger("resize." + child_id);
      });
  }
  

  可以在here找到查看此解决方案的codepen .

  不幸的是，由于窗口事件，此解决方案在管理资源时需要额外的开销 .

  回复于 2024-04-24T23:50:16+08:00