vorporeal/iron-fit-constrain-bug.html

## iron-fit-constrain-bug.html
<html>
  <head>
    <base href="//polygit.org/polymer+v1.1.3/components/">
    <link href="polymer/polymer.html" rel="import">
    <link href="paper-dialog/paper-dialog.html" rel="import">
    <script>
      // There were JS errors being thrown due to incorrect usage of
      // these methods, so I stubbed them out so the example would run.
      Polymer.Gestures.add = function() {};
      Polymer.Gestures.remove = function() {};

      function openDialog(id) {
        document.getElementById(id).open();
      }
    </script>
    <style>
      paper-dialog {
        margin: 0;
        border: 1px solid red;
        /* Using "overflow: visible" with the red border makes it clear when content is overflowing. */
        overflow: visible !important;
      }
      #container {
        position: absolute;
        top: 100vh;  /* Position the dialog's container at the bottom of the viewport. */
        left: 0;
      }
    </style>
  </head>
  <body>
    <paper-dialog id="dialog" with-backdrop>
      <div>Some content.</div>
    </paper-dialog>
    <div id="container">
      <paper-dialog id="broken-dialog" with-backdrop>
        <div>Some overflowing content.</div>
      </paper-dialog>
    </div>
    <button onclick="openDialog('dialog')">Open dialog!</button>
    <button onclick="openDialog('broken-dialog')">Open broken dialog!</button>
  </body>
</html>
	<html>
	<head>
	<base href="//polygit.org/polymer+v1.1.3/components/">
	<link href="polymer/polymer.html" rel="import">
	<link href="paper-dialog/paper-dialog.html" rel="import">
	<script>
	// There were JS errors being thrown due to incorrect usage of
	// these methods, so I stubbed them out so the example would run.
	Polymer.Gestures.add = function() {};
	Polymer.Gestures.remove = function() {};

	function openDialog(id) {
	document.getElementById(id).open();
	}
	</script>
	<style>
	paper-dialog {
	margin: 0;
	border: 1px solid red;
	/* Using "overflow: visible" with the red border makes it clear when content is overflowing. */
	overflow: visible !important;
	}
	#container {
	position: absolute;
	top: 100vh; /* Position the dialog's container at the bottom of the viewport. */
	left: 0;
	}
	</style>
	</head>
	<body>
	<paper-dialog id="dialog" with-backdrop>
	<div>Some content.</div>
	</paper-dialog>
	<div id="container">
	<paper-dialog id="broken-dialog" with-backdrop>
	<div>Some overflowing content.</div>
	</paper-dialog>
	</div>
	<button onclick="openDialog('dialog')">Open dialog!</button>
	<button onclick="openDialog('broken-dialog')">Open broken dialog!</button>
	</body>
	</html>