Max-Content не будет уважаться в рамках подсрочной макета ⇐ Html

[Anonymous]

См. Пример кода ниже. У меня есть какая -то сетка с заголовком, ряд фильтров, тело и нижний колонтитул. Я использую макет сетки с макетом подсрочного на заголовке, строкой фильтра, телом и нижним колонтитулом. Моя цель-использовать Max-Content (который будет Autosize) для первых двух столбцов. Для этого я установил соответствующие колонны сетки . Но по какой-то причине, если ячейка фильтра содержит входной элемент, настройка Max-Content не применяется. Почему это? Как я могу заставить его работать?

Код: Выделить всё

.d-grid-container {
display: grid;
grid-template-rows: auto;
grid-template-columns: max-content max-content max-content minmax(50px, 1fr);
font-family: Arial, sans-serif;
}

.d-grid-header-row {
background-color: #f0f0f0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}

.d-grid-header-cell {
padding: 8px;
border-right: 1px solid #ddd;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}

.d-grid-container > *, .d-grid-container > * > *,
.d-grid-container > * > * > .d-grid-body-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}

.filter-container {
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
}

d-grid-numeric-filter {
flex: 1;
padding: 2px;
}

.d-grid-numeric-filter {
width: 100%;
padding: 4px;
box-sizing: border-box;
flex: 1;
}< /code>



id
name
email
active



























1
john doe
john.doe@email.com
true


2
bill the kid
billthekidverylong@email.com
true

Подробнее здесь: https://stackoverflow.com/questions/797 ... rid-layout