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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If i understood your question correctly and you want your element to have full width although it is empty from content you can do

.child {
  max-width: 400px;
  height: 100px;
  padding: 16px;
  color: white;
  background: red;

  width: 100%; // setting 100% width with max width will always stretch the element to the max width (if possible)
}

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>