I’ve got some contents that have a minimum and a maximum width.
They are in a container that can shrink and grow, but should never break these constraints.
I want to center that container if there’s ample space, but I can only get it to fill its parent (using flex-grow) or remain at the minimum dimensions (not using flex-grow).
In other words, in this example, I want:
- the orange to be centered in the red
- the orange to tightly hug the green
- each green to be 100px wide
.parent {
display: flex;
justify-content: center;
align-items: center;
/* To make it visible */
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
/* What do I do here to make this inline-flexbox grow up to the maximum of its contents?
(2 * 100 px + some padding)
flex-grow: 1; doesn't work, because then it fills its parent */
display: inline-flex;
flex-grow: 1;
/* To make it visible */
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 20px;
/* To make it visible: */
height: 100%;
background: green;
}<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
3
Answers
Using justify-content: center; and align-items: center; in the parents div would do the job like I did below or you use place-item: center; I think but am not too sure
Don’t use
max-widthbut define width and the shrink effect will make them smaller if needed.Here is the working example :
max-width : 100px;
min-width : 100px;
Reason : width -> (max & min) both applied
if max-width : 100px & min-width : 20px;
so, width will be 20px for minimum default (will show default) and maximum it can go upto 100px;