How to set width equalt to max-width even contents is not yet fill fully to max width of child div and child div alway centered of parent, but it should wrap child div (child div will width equal to parent) if parent div smaller than child div
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px dotted green;
}
.child {
max-width: 400px;
height: 100px;
padding: 16px;
color: white;
background: red;
}
.expected-width {
width: 400px;
text-align: center;
border: 1px dotted blue;
margin: 16px 0 0 0;
}<div class="parent">
<div class="child">contents</div>
<div class="expected-width">expected width</div>
</div>>Solution :
If you add width: 100% to child you’ll get the same width
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px dotted green;
}
.child {
max-width: 400px;
width: 100%;
height: 100px;
padding: 16px;
color: white;
background: red;
}
.expected-width {
width: 400px;
text-align: center;
border: 1px dotted blue;
margin: 16px 0 0 0;
}<div class="parent">
<div class="child">contents</div>
<div class="expected-width">expected width</div>
</div>