Question

我使用库react-toastify在应用程序中显示吐司。默认情况下，吐司有width: 320px。由于有时一个单词的空间不足，并且该单词的一部分没有显示，因此我尝试使用此CSS来调整吐司的大小：

div.toast-resize {
  width: auto;
  max-width: 500px;
}

这在Chrome中有效，但不幸的是在IE 11中无效。在IE中，敬酒总是带有min-width。我认为原因是toastify使用flexbox。不幸的是，this和this都无法解决。我创建了以下示例。 .Toastify*-规则无法更改，div.toast-resize是我自己的规则。

如何在IE和Chrome中使外观相同？

.Toastify__toast-container {
  position: fixed;
  width: 320px;
}
.Toastify__toast {
  margin-bottom: 1rem;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.Toastify__toast--success {
  background: #07bc0c;
}
.Toastify__toast-body {
  flex: 1 1;
}

div.toast-resize {
  width: auto;
  max-width: 500px;
  min-width: 100px;
}

<html>
  <body>
    <div class="Toastify">
      <div class="Toastify__toast-container Toastify__toast-container--top-right toast-resize">
        <div class="Toastify__toast Toastify__toast--success">
          <div class="Toastify__toast-body" role="alert"
            >Very long text with loooooooooooooooooooooooooooooooooooooooooooong word</div>
        </div>
        <div class="Toastify__toast Toastify__toast--success">
          <div class="Toastify__toast-body" role="alert">Short text</div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

您可以在min-width类中使用.toast-resize，与max-width相同。它将div强制在每个设备中精确为500px。

div.toast-resize {
  min-width: 500px;
  max-width: 500px;
}

IE 11中的Flexbox最小宽度损坏

1 个答案: