Блог

Главная - Вопросы по программированию - Столбец сетки, выходящий за пределы границы при использовании функции minmax для ширины

Столбец сетки, выходящий за пределы границы при использовании функции minmax для ширины

#html #css #css-grid

#HTML #css — файл #css-сетка #css

Вопрос:

У меня есть CodePen в CSS Grid с границей, которая иллюстрирует эту проблему.

HTML:

 <div class="grid-properties">
  <div class="column-properties">Column A</div>
  <div class="column-properties">Column B</div>
  <div class="column-properties">Column C</div>
</div>

CSS — файл:

 .grid-properties {
  display: grid;
  grid-template-columns: max-content max-content minmax( 400px, 1fr );
  column-gap: 4px;
  border: 1px solid black;
  margin: 16px;
}

.column-properties {
  background-color: lightgray;
  font-size: xx-large;
  padding: 4px;
}

Если ширина окна уменьшается до такой степени, что третий столбец достигает минимальной ширины 400 пикселей, столбец выходит за пределы границы сетки.

перекрытие

Если я использую:

 grid-template-columns: max-content max-content 1fr;

поведение работает так, как ожидалось.

Я не уверен, как это исправить и считается ли это ошибкой браузера. Поведение является согласованным в нескольких браузерах.

Комментарии:

1. Я не вижу здесь никакой ошибки. Min max четко указывает минимальный и максимальный пределы вашего диапазона ширины для этого столбца. 1fr настраивается на свободное пространство. Реальный вопрос в том, каков ваш предполагаемый конечный результат?

2. Я хочу, чтобы граница окружала все столбцы. Когда ширина окна уменьшается до точки, в которой минимальная ширина третьего столбца составляет 400 пикселей, граница больше не окружает все столбцы. Граница появляется под третьим столбцом — я этого не хочу.

3. Ваш min-width столбец C работает нормально. Просто при ваших текущих настройках ваше окно, по сути, должно иметь ширину не менее 741px, чтобы вместить все 3 столбца, пробелы и поля. Но поскольку мы можем уменьшить окно ниже 741px, минимальная ширина вашего 3-го столбца в 400px уменьшается, и он выпадает. Я предлагаю добавить переполнение в направлении x, чтобы вы могли прокручивать вправо, если вы намерены сохранить минимальную ширину столбца 400 пикселей для столбца C.

4. почему бы просто не установить минимальную ширину экрана 400 пикселей с помощью overflow, чтобы у вас была полоса прокрутки при переходе ниже 400 пикселей. Альтернативно, для удобства добавьте точки останова @media и определите там, что должно произойти, если экран с опустится ниже 400 пикселей?

5. При макете 400 пикселей отображаются правильно. Установите для последнего столбца значение max-content тоже или только для с 1fr, повторите, автозаполните, чтобы получить аналогичный эффект

Ответ №1:

дайте мне знать, сработает ли это для вас или нет.

 display: grid;
  grid-template-columns: auto auto auto auto;

или

 display: grid;
  grid-template-columns: 1fr 1fr 1fr;

Ответ №2:

Основываясь на комментарии от @kvncnis, похоже, это решение:

 .grid-properties {
  display: grid;
  grid-template-columns: max-content max-content minmax( 400px, 1fr );
  column-gap: 4px;
  border: 1px solid black;
  overflow-x: scroll;
}

(если кто-нибудь может добавить или предоставить более точные детали, мне было бы интересно)

Что происходит, так это то, что верх берет поведение переполнения. Добавляя overflow-x: scroll , браузеру сообщается, что правильно делать при возникновении переполнения.