Input breaks out of small container with flex basis auto

user_1130734 0
Viewed 652

When there's an outer div with display: flex, and inner div with flex: 1 0 auto and an input inside with width: 100%, the input breaks out of the container at a certain size. This is likely the default min size of an input, however setting min-size: 0 does not fix it. Removing the flex basis auto does resolve it, but I'd like to know why (as the default flex basis value is auto anyway) and how it can be fixed still keeping flex basis and the current HTML structure as closely as possible.

Input breaks out

Example: https://jsfiddle.net/xjh2635s/

.outer {
  background-color: blue;
  padding: 10px;
  width: 150px;
}

.container {
  display: flex;
}

.inner {
  flex: 1 0;
  flex-basis: auto;
}

input {
  box-sizing: border-box;
  width: 100%;
}
<div class="outer">
  <div class="container">
    <div class="inner">
      <input type="text">
    </div>
  </div>
</div>

flexbox css html
1 Answers

Removing the flex basis auto does resolve it, but I'd like to know why (as the default flex basis value is auto anyway). . .

You're correct that the initial value of flex-basis is auto (MDN).

However, in using the flex property, you've overridden the default, resulting in flex-basis: 0.

flex: 1 0 means:

  • flex-grow: 1
  • flex-shrink: 0
  • flex-basis: 0

(Spec: § 7.1.1. Basic Values of Flex)

So when you remove flex-basis: auto the code falls back to flex-basis: 0, and the layout works.

Note that the problem you describe exists in Chrome, but not Firefox and Edge, where the layout works fine with the original code.

user_35972760
Related