div has width of 0 while used in a flex component which is a grid column
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: ngnijland, Unassigned)
Details
Attachments
(2 files)
Screenshot 2020-07-23 at 13.31.38.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:78.0) Gecko/20100101 Firefox/78.0
Steps to reproduce:
Open an html file with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex in grid bug</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, [col-start] 1fr);
}
@media (min-width: 800px) {
.grid {
grid-template-columns: repeat(4, [col-start] 1fr);
}
}
.flex-container {
display: flex;
align-items: center;
justify-content: flex-start;
grid-column: span 1 / -1;
}
.text {
margin: 0;
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<section class="grid">
<div class="flex-container">
<div class="wrapper">
<p class="text">Hello world</p>
</div>
</div>
</section>
</body>
</html>
Actual results:
The div with the class wrapper has a width of 0 (see attachment). However when you resize the browser window and make sure to pass the media query size (800px) the div takes the proper width.
Expected results:
On initial load the div with class wrapper should have a width.
I should add; this only happens when using the wrinting-mode css property on the p element. Without it the width of the div renders fine
|
||
Updated•4 years ago
|
|
||
Comment 2•4 years ago
|
||
|
||
Comment 3•4 years ago
|
||
This looks like a version of the known issue whereby an orthogonal child that has auto block-size and hasn't yet been reflowed reports an intrinsic size of zero to its container. Similar issues can be exhibited with table cells, floats, etc:
data:text/html,<div style="float:left;border:1px solid red"><div style="writing-mode:sideways-rl">Hello world
Triggering an additional reflow (e.g. by zooming the view) resolves the error (although if the block-size of the orthogonal child changes when it is reflowed, we'd still have the issue that the parent would be using a stale value).
Pretty sure we have an existing bug about this.
|
|
||
Comment 4•4 years ago
|
||
Yeah, see bug 1310551.
Description
•