css сетка содержимого содержимого вне границ с режимом вертикальной записи

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>

Как видите, вертикальный текст в первом столбце сетки выходит за границы.
При повторном включении свойства text-align: center в firefoxс помощью отладчика css текст отображается правильно.
В chrome компоновка изменяется при повторном включении свойства box-sizing.
Смотрите следующее видео:
https://screens.totally.rip/2018/09/vokoscreen-2018-09-25_23-33-02.webm

Мои предположениязаключается в том, что браузер не может рассчитать ширину первого столбца сетки, потому что текст написан вертикально.
Но, возможно, я просто неправильно использую некоторые свойства CSS.

Answer 1

Я сообщил об ошибке, и оказалось, что это уже известно.Видимо, ребенок не может сообщить правильную ширину из-за ортогонального потока.

См. мой отчет об ошибках и основная проблема .

У меня естьНе удалось найти проблему хрома для этого поведения, но я думаю, что ошибка также уже известна там.

Обратите внимание, что ошибки firefox и chromium на самом деле не совпадают.
Минимальный тестовый примерЯ предоставил свой отчет об ошибках, хорошо отображает хром, но пример из моего вопроса выше - нет.Я думаю, это как-то связано с гибким макетом.

Answer 2

Если вы хотите, чтобы первый столбец занимал всю ширину ..try

flex:1;  

В div первого столбца.Но если вы хотите, чтобы столбец .first был слева, как в asidebar
Задайте область сетки и определите каждый из них, затем примените к элементам 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}

, то есть: еслиВы хотели два вертикальных столбца, первый больше, чем второй столбец Примечание: использовали класс (.), но не возражаете, я набираю с помощью телефона ма, так что это отстой, просто используйте ваш номер