[Mobile] Section border overlaps the examples

[mirunacurtean]

1. On a mobile browser open https://developer.allizom.org/en-us/docs/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container#Aligning_one_item_with_align-self.
2. Scroll through the flex examples.
3. Notice that the section border line overlaps the example itself instead of encapsulating it.

[ghost]

They look like iframes. I didn't understand if there is another repository for those iframes right to the content.

Perhaps an

• iframe.scss atom should be created
• with a 🟡 yellow
• ... dotted
• border
• and padding.

[Ryuno-Ki]

My script blocker points me to https://mdn.github.io/css-examples/flexbox/alignment/align-self.html for the included iFrame.

[ghost]

• It is in Yari file system?
• It is a Yari issue?

[schalkneethling]

That border is set in the example itself:
https://mdn.github.io/css-examples/flexbox/alignment/align-items.html

So, it would need to be resolved there.

In fact you can see the problem here:

.box {
    width: 500px;
    border: 2px dotted rgb(96, 139, 168);
}

The fixed-width should be removed.

[caugner]

The fixed-width should be removed.

Sounds reasonable, here's where that's located:

css-examples/flexbox/alignment/align-items.html

Lines 62 to 65 in 2d33a1c

	.box {
	width: 500px;
	border: 2px dotted rgb(96, 139, 168);
	}