css - 使用宽度与使用最小宽度和最大宽度

Question

即使在页面宽度发生变化时也试图将元素保持在设定的恒定宽度时，使用 css 宽度参数的最佳方法是什么？

(即 宽度:20rem；&最小宽度:20rem； 对比 最小宽度:20rem；&最大宽度: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

Min-width 和 max-width 指定可调整大小的对象的大小限制。因此，如果您希望您的元素不可调整大小，您应该使用 pixels(px) 而不是 rem 来使用恒定宽度。