Prevent children of flexbox overflowing parent?

Question

How can I stop children of a flexbox overflowing the container?

I do not want the overflow set to hidden.
I want both of the children to fit inside the parent.
No wrapping to next line.

HTML:

<div>
  <form>
    <input type="text">
    <input type="submit">
  </form>
</div>

CSS:

div {
  background: gold;
  width: 120px;
}

form {
  display: flex;
}

input[type='text'] {
    ??
}

input[type='submit'] {
    ??
}

score 3 · Accepted Answer · answered Mar 04 '19 at 16:52

CSS inputs are hard to flex, because they're replaced elements. You have to overwrite some default styles from the OS:

 input {
    min-width:0;
    flex: 1 1 0;
 }

The above code will make them equal in width (start at flex-basis of 0 and grow equally with each other). You may not want that.

If you want one to grow proportionally larger than the other you can change it to:

input[type='text'] {
    flex: 2 1 0;
}

input[type='submit'] {
    flex: 1 1 0;
}

which makes the text input grow at twice the rate of the submit button. i.e. - the text element would take up 2/3 and the submit button would take up 1/3.

Prevent children of flexbox overflowing parent?

1 Answers1