RE: The :min-width/:max-width pseudo-classes

Hi,

I'm still trying to understand how exactly the <viewport> 'layout-ancestors-to-layout-childs' model is problematic. I may be wrong but it seems to me that

  <div style="width: calc(50% + 1em + 1vh)">
    <div style="width: calc(50% + 1em + 1vh)">
      Some content
    </div>
  </div>

already requires that you compute the layout of the parent div before you can compute the layout of the inner one, right? In my mental model, I don't see how this is so different in the case of :min-width. 


While I'm asking layout questions, can I also ask how browsers are able to get min-content and percentages working properly inside each other?

  <div style='width: 50%; background: blue;'>
    <div style='width: -webkit-min-content; background: red;'>
      <div style='width: 50%; background: yellow;'>
        Some content
      </div>
    </div>
  </div>

Does it imply two successive relayouts (one where percentages are treated as 0, and then another one where they are resolved against the previously detemined value for min-content)? Does it means I can get <iframe seamless>-like 2^n relayouts where n is the number of nested min-content elements?


Best regards,
François