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

Question

What is the best way to use the css width parameters when trying to keep an element at a set constant width even when the width of the page changes?

(ie width: 20rem; & min-width: 20rem; vs min-width: 20rem; & max-width: 20rem; )

Using just width: 20rem; results in the sidebar shrinking from a change in width:

Expected width of the sidebar:

---

Sidebar shrinks when I would like it to remain the same size:

---

However using width: 20rem; & min-width: 20rem; width: 20rem; & min-width: 20rem; seems to solve this issue.

Expected width of the sidebar:

---

Expected width of the sidebar remains:

---

Also using min-width: 20rem; & max-width: 20rem; min-width: 20rem; & max-width: 20rem; seems to also solve this issue.

Expected width using max-width:

---

Expected width using max-width even when window size changes:

My overall question is which solution is preferred and what are the consequences of each as they both seem relatively the same

General css code

.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 and max-width specify constraints on how large/small a resizable object can go. So if you want your element to not be resizable you should just use a constant width by using pixels(px) instead of rem.

Answer 2

Width and min-width can work together. Most people use two different units when using them example: width: 90%, min-width:600px. It is also worth noting that min-width will overide width.

W3 min-width