Question

我正在使用包含两个div元素和以下列模板的网格布局：
fit-content(25%) auto。

我想使第一个div达到网格高度，并在其中垂直书写并居中放置文本。
我还希望第一个div包含一个fieldset，因此我在display: flex上设置了align-items: stretch和fieldset，以使所包含的项目具有最大可用高度。

我设置了以下示例：

div#grid {
    display: grid;
    grid-template-columns: fit-content(25%) auto;
}

div#first-column > fieldset {
    display: flex;
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
}

div#sideways {
    writing-mode: tb-rl;
    transform: rotate(0.5turn);
    text-align: center;
}

<div id="grid">
    <div id="first-column">
        <fieldset>
            <div id="sideways">
                <a href="#">Sideway Text</a>
            </div>
        </fieldset>
    </div>
    <div id="second-column">
        text<br/>
        to<br/>
        make<br/>
        the<br/>
        grid<br/>
        higher<br/>
        <br/>
        <br/>
    </div>
</div>

如您所见，第一个网格列中的垂直文本超出范围。
使用CSS调试器在firefox中重新启用text-align: center属性时，文本将正确呈现。
在chrome中，重新启用box-sizing属性时，布局会更改。
观看以下视频：
https://screens.totally.rip/2018/09/vokoscreen-2018-09-25_23-33-02.webm

我的猜测是，由于文本是垂直书写的，因此浏览器无法计算第一个网格列的宽度。
但是也许我只是没有正确使用某些CSS属性。

Answer 1

如果您希望第一列占用所有宽度..try

flex:1;

在第一列div中。但是，如果您想要.first-column 像在侧边栏一样位于左侧
设置网格区域并定义每个区域，然后将其应用于div

.grid {display:grid;
grid-template-column: ...
grid'template-row:....
  grid-area: 
         "first  first second"
        "first  first second"}
.first-column {grid-area:first}
.Second-column:{grid-area:second}

即：如果您想要两个垂直列，则第一列要比第二列大 注意：曾经使用过（。）类，但不要介意使用手机输入，因此仅使用您的数字符号就很烂

Answer 2

我报告了该错误，事实证明这是已知的。显然，由于正交流，孩子未能报告正确的宽度。

请参见my bug report和the underlying issue。

我无法找到这种问题的铬问题，但我想该错误也已经在那里知道。

请注意，Firefox和Chrome的bug实际上并不相同。
我在错误报告中提供的最小测试用例可以很好地显示铬，但上述问题中的示例却没有。我想这与flex布局有关。

CSS网格适合内容在垂直书写模式下超出范围

2 个答案: