CODEWITHSUNDEEP
cssflexbox
ppak10
ppak10

Reputation: 2393

Using width vs using min-width & max-width

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?

(i.e 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:

Expected width of the sidebar

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

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

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

Expected width of the sidebar:

Expected width of the sidebar

Expected width of the sidebar remains:

Expected width of the sidebar remains

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

Expected width using max-width:

Expected width using max-width

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

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;
            }
        }
    }
}

Upvotes: 0

Views: 2512

Answers (2)

Jason Smith
Jason Smith

Reputation: 79

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

Upvotes: 0

CyclopeanCity
CyclopeanCity

Reputation: 91

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.

Upvotes: 1

Related Questions