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:
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 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 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;
}
}
}
}
See Question&Answers more detail:os