CODEWITHSUNDEEP
javascriptcssgoogle-chromesafariflexbox
Qwertiy
Qwertiy

Reputation: 21430

Flexbox doesn't recalculate styles

In Chrome and Safari width of the div is calculated only once.
Any changes of dom tree, adding or removing classes and resizes of the window are ignored.
How can I force width recalculation without page reload?

https://jsfiddle.net/7xpoccg6/7/
Resize demo area vertically there, then click Run to reload example in new size.
Or use full page switch in the snippet.

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;
}
<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>

Upvotes: 3

Views: 2234

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

as commented, you may inbricate flexbox and force a reflow at screen to awaken webkit:

example with vh value on 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>No idea if that is a known bug and if documented anywhere,

anyone,fill free to improve this answer

Notice, vh units is recalculated when window(or framed window) is resized vertically, works with the snippet/fiddle.

Upvotes: 4

Related Questions