Make flex container width grow as its children

Question

This is simplified layout:

<div class="root">
  <div class="container">
    <div class="cell">
      <input type="text" class="contact"></input>
    </div>
  </div>
</div>

And this is simplified CSS:

.root {
  background-color: red;
  overflow: auto;
  width: 300px;

}

.container {
  background-color: green;
  display: flex;
  height: 50px;
}

.cell {
  background-color: black;
  height: 30px;
}

.contact {
  width: 400px;
}

This is jsFiddle .

It is somewhat unexpected to me that the container width isn't the same as it is required by its child and rather is as limited by the root div . You can see in this jsFiddle that red area (root div ) isn't filled with the green container div .

Could someone explain why flex container width doesn't grow as its children and how to fix that?

Answer 1

Block element grows to its parent width, inline grows with its content.

A great and more in-depth explanation can be found here:

• Make background color extend into overflow area

---

Change to inline-flex and you get the expected result.

 .root { background-color: red; overflow: auto; width: 300px; } .container { background-color: green; display: inline-flex; /* changed */ height: 50px; } .cell { background-color: black; height: 30px; } .contact { width: 400px; } 

 <div class="root"> <div class="container"> <div class="cell"> <input type="text" class="contact"> </div> </div> </div>