Grid auto width column disregards auto linebreaks in vertical text
Categories
(Core :: Layout: Grid, defect)
Tracking
()
People
(Reporter: rolf.borchmann, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Steps to reproduce:
I assigned grid layout to the body element with grid-template-column: auto 1fr.
The body is height-limited to 100vh minus margins.
Grid column 1 contains a header element with writing-mode:vertical-rl and text-orientation:sideways. The intention is to have a area with vertical text at the left of the screen. The text itself is English. Problems start when the viewport height is reduced and the text doesn't fit into the available inline-size of that element.
Actual results:
The lines wrap, increasing the needed space for text. The grid column stays the same size, and the overflow text clutters the main area. Even a page reload doesn't change that.
See this fiddle: https://jsfiddle.net/1hbk9moa/
Expected results:
The line wrap increases the block size that's necessary for the header element. Because of the vertical writing-mode, this should result in an increase of the auto column-width.
Compare the jsFiddle results in Firefox and Chromium.
![]() |
||
Updated•1 year ago
|
Updated•1 year ago
|
Description
•