View All Attachments for Bug 290452

Attachment #474722
Result	image/png	2025-03-26 07:13:53 PDT	15.45 KB	no flags	Details

Attachment #474743
Test	text/html	2025-03-27 15:51:02 PDT	1.59 KB	no flags	Details

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Scrollbar Issue</title>
		<style>
			.parent {
				position: fixed;
				box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
				max-height: 500px;
				display: flex;
				flex-direction: column;
			}

			.scrollSection  {
				overflow: auto;
				flex: 1 1 100%;
			}

			.item {
				display: flex;
				height: 10rem;
				border: 1px solid black;
			}

			.item > span {
			   text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			::-webkit-scrollbar {
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="scrollSection">
				<div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
					<div class="item">
						<span>
							Text Text Text Text Text Text Text Text Text
						</span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Attachment #474756
Test reduction	text/html	2025-03-29 06:13:11 PDT	300 bytes	no flags	Details

<style>
.container {
  height: 90px;
  display: flex;
}

.flex-item  {
  overflow: auto;
}

.content {
  height: 100px;
  width: 100px;
  background-color: green;
}
</style>
PASS if no horizontal scrollbar (test with always on scrollbar).
<div class=container><div class=flex-item><div class=content>