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

Question

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

（即width: 20rem; & min-width: 20rem; vs min-width: 20rem; & max-width: 20rem; ）

使用 width: 20rem; 导致边栏因宽度变化而缩小：

侧边栏的预期宽度：

---

边栏缩小时，我希望它保持相同的大小：

---

但是使用 width: 20rem; & min-width: 20rem; width: 20rem; & min-width: 20rem; 似乎解决了这个问题。

侧边栏的预期宽度：

---

侧边栏的预期宽度保持不变：

---

还使用 min-width: 20rem; & max-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

最小宽度和最大宽度指定可调整大小的对象可以移动的大小限制。 因此，如果您希望元素的大小不可调整，则应通过使用pixel（px）而不是rem来使用恒定宽度。

Answer 2

宽度和最小宽度可以一起使用。 大多数人在使用示例时会使用两个不同的单位：宽度：90％，最小宽度：600px。 还值得注意的是，最小宽度将覆盖宽度。

W3最小宽度