Question

在Chrome和Safari中div的宽度仅计算一次 dom树的任何更改，添加或删除类以及调整窗口大小都将被忽略如何在没有页面重新加载的情况下强制重新计算宽度？

https://jsfiddle.net/7xpoccg6/7/
在那里垂直调整演示区域的大小，然后单击运行以新大小重新加载示例。
或者在代码段中使用完整页面切换。

＆＃13;

html, body, section {
  margin: 0;
  height: 100%;
}

section {
  display: flex;
}

section:before, section::after {
  content: "";
  flex: 1 0 0px;
  background: antiquewhite;
  height: 100%;
}

div {
  flex: 0 1 auto;
  height: 50%;
  background: green;
  align-self: flex-end;
}

svg {
  height: 100%;
  display: block;
}

＆＃13;

<section>
  <div class="c">
    <svg viewBox="0 0 1000 2000" class="avatar">
      <ellipse cx="500" cy="1000" rx="500" ry="1000" fill="red" />
    </svg>
  </div>
</section>

＆＃13;

Answer 1

如评论所述，您可以在屏幕上使用flexbox并强制重排以唤醒webkit：

vh上的min-width值示例：

html,
body,
section {
  margin: 0;
  height: 100%;
}

section {
  display: flex;
}

section:before,
section::after {
  content: "";
  flex: 1;/* this should be enough */
  background: antiquewhite;
  height: 100%;
}

div {
  /* flex value unnecessary i think */
  display: flex;
  height: 50%;
  background: green;
  margin: auto 0 0;/* can be used instead align-self */
}

svg {
  height: 100%;
  min-width:0.1vh;/* hack to force reflow */
  display: block;
}

<section>
  <div class="c">
    <svg viewBox="0 0 1000 2000" class="avatar">
      <ellipse cx="500" cy="1000" rx="500" ry="1000" fill="red" />
    </svg>
  </div>
</section>

https://jsfiddle.net/7xpoccg6/12/

<edit>不知道这是否是一个已知错误，如果记录在任何地方，

任何人，请随意填写此答案

请注意，当窗口（或框架窗口）垂直调整大小时，会重新计算vh单位，与代码段/小提琴一起使用。

Flexbox不会重新计算样式

1 个答案: