使用寬度與使用最小寬度和最大寬度

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最小寬度