File: stretched-child-in-nested-flexbox-003.html

package info (click to toggle)
thunderbird 1%3A143.0.1-1
  • links: PTS, VCS
  • area: main
  • in suites: experimental
  • size: 4,703,968 kB
  • sloc: cpp: 7,770,492; javascript: 5,943,842; ansic: 3,918,754; python: 1,418,263; xml: 653,354; asm: 474,045; java: 183,079; sh: 111,238; makefile: 20,410; perl: 14,359; objc: 13,059; yacc: 4,583; pascal: 3,405; lex: 1,720; ruby: 999; exp: 762; sql: 715; awk: 580; php: 436; lisp: 430; sed: 69; csh: 10
file content (19 lines) | stat: -rw-r--r-- 921 bytes parent folder | download | duplicates (3) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<title>css-flexbox: stretching of flex item in nested flexbox</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://github.com/servo/servo/issues/38023">
<link rel="match" href="/css/reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Due to min-height, the outer flex container is 200px tall.
  It's single-line, so its flex item stretched to that size, and is considered definite.
  Therefore, the percentage in the nested flex container resolves as 200px.
  And thus its flex item is also stretched to be 200px tall.
">

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex; min-height: 200px">
  <div>
    <div style="display: flex; height: 100%; background-color: red">
      <div style="width: 200px; background-color: green;"></div>
    </div>
  </div>
</div>