Content - 4f162487a711c78f48bf457d3fb0764bb5f2b746 - cd06b75/css/css-flexbox/percentage-heights-004.html

visit type:

Tip revision: 12b6163dada31f7883839c25903e69566b9ef8b0 authored by Eugene Kim on 28 November 2018, 11:15:33 UTC
Change <area> element's style to display:none

Tip revision: 12b6163

percentage-heights-004.html

<!DOCTYPE html>
<html>
<title>CSS Flexbox: Percentages in stretched container</title>
<link rel="author" title="Google" href="https://www.google.com/" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" />
<link rel="match" href="percentage-heights-004-ref.html">

<style>
#outer {
  height: 10em;
  display: inline-flex;
  background: red;
}

#middle {
  overflow-x: scroll;
}

#inner {
  height: 100%;
  width: 200px;
  background: green;
}

#outer2 {
  height: 10em;
  display: inline-flex;
  flex-direction: column;
  background: red;
}

#middle2 {
  overflow-x: scroll;
  flex: 1.0;
}

#inner2 {
  height: 100%;
  width: 200px;
  background: green;
}
</style>

<p>You should not see red nor a vertical scrollbar</p>

<div id="outer">
  <div id="middle">
    <div id="inner">
      hello
    </div>
  </div>
</div>

<div id="outer2">
  <div id="middle2">
    <div id="inner2">
      hello
    </div>
  </div>
</div>

Browse the archive

https://github.com/web-platform-tests/wpt