Использование ширины против использования минимальной ширины и максимальной ширины

Question

Каков наилучший способ использования параметров ширины css при попытке сохранить элемент на заданной постоянной ширине, даже если ширина страницы изменяется?

(т. Е. width: 20rem; & min-width: 20rem; против min-width: 20rem; & max-width: 20rem;)

Использование только width: 20rem; приводит к уменьшению боковой панели из-за изменения ширины:

Ожидаемая ширина боковой панели:

---

Боковая панель сжимается, когда я хочу, чтобы она оставалась неизменной:

---

Однако использование width: 20rem; & min-width: 20rem; , похоже, решает эту проблему.

Ожидаемая ширина боковой панели:

---

Ожидаемая ширина боковой панели остается:

---

Также использование min-width: 20rem; & max-width: 20rem; , похоже, также решает эту проблему.

Ожидаемая ширина с использованием max-width:

---

Ожидаемая ширина с использованием максимальной ширины даже при изменении размера окна:

Мой общий вопрос: какое решение является предпочтительным и каковы последствия каждого из них, поскольку оба они кажутся относительно одинаковыми

Общий код CSS

.messages-component {

    .threads-sidebar {
        @include box-shadow-helper(1);
        background: white;
        display: flex;
        flex-direction: column;
        width: 20rem;

        .threads-sidebar-header {
            @include box-shadow-helper(1);
            display: flex;
            min-height: 3em;
        }

        .threads-sidebar-body {
            @include box-shadow-helper(1);
            display: flex;
            flex: 1;
            flex-direction: column;

            .test {
                color: $mvn-btn-red;
            }
        }
    }
}

Answer 1

Минимальная ширина и максимальная ширина задают ограничения на то, насколько большим / маленьким может быть изменяемый объект.Поэтому, если вы хотите, чтобы размер вашего элемента не изменялся, вы должны просто использовать постоянную ширину, используя пиксели (px) вместо rem.

Answer 2

Ширина и минимальная ширина могут работать вместе.Большинство людей используют два разных устройства, например: ширина: 90%, минимальная ширина: 600 пикселей.Также стоит отметить, что min-width будет переопределять ширину.

W3 min-width