0

I have a form with a single input tag sitting inside of a div. I'm trying to have the form/input respect the width of the parent, but I can't seem to make it react to flexbox -- it just decides its own width and overflows the container.

HTML

<div class="container">
  <span>foo</span>
  <span>bar</span>
  <form>
    <input value="baz"/>
  </form>
</div>

CSS

.container {
  display: flex; 
  width: 150px; 
  border: 1px solid black;
}

Screenshot

Screenshot

JSFiddle.

What I would expect is that the flexbox setting on the parent div would shrink the form to fit inside of its width, but this isn't happening. Instead, the form/input just sits at its desired width and doesn't shrink down, even if I set flex-shrink on it.

William
  • 942
  • 2
  • 12
  • 25
aardvarkk
  • 14,955
  • 7
  • 67
  • 96

2 Answers2

2

If you add this rule, the input will adjust.

.container input {
  width: 100%;               /*  override its defalt width  */
  box-sizing: border-box;    /*  make border/padding size be
                                 included in the set width  */
}


.container {
  display: flex;
  width: 150px;
  border: 1px solid black;
}

.container input {
  width: 100%;               /*  override its defalt width  */
  box-sizing: border-box;    /*  make border/padding size be
                                 included in the set width  */
}
<div class="container">
  <span>foo</span>
  <span>bar</span>
  <form>
    <input value="baz" />
  </form>
</div>

The reason is that a flex item (here the form) can't be smaller than its content, even if one allow it to shrink using flex-shrink.

In this case it is the input, which has a predefined width, hence force the form to size with it, where the solution is to override the input's width.

Furthermore, as the input is not a flex item, the form is, it won't respond to flex item properties.

Flex container/flex items have a parent/child relation, and it is only the children that are flex items, not grandchildren.

Here is some more reading about flex containers/items and form elements:

Asons
  • 84,923
  • 12
  • 110
  • 165
  • Thanks for your response. Can you tell me where I could read up on what is or isn't a "flex item"? Is it only direct children of a flexbox that are "flex items", and that's why the input isn't treated as such? – aardvarkk Jan 29 '18 at 19:30
  • 1
    @aardvarkk Added a note to my answer about flex items and their flex container. – Asons Jan 29 '18 at 19:33
  • 1
    @Michael_B Thanks...updated my answer with those 2 links + 1 cover `min-width` – Asons Jan 29 '18 at 20:01
1

Try this

.container {
  display: flex; 
  width: 150px; 
  border: 1px solid black;
}
form input{
  width: 100%;
  box-sizing: border-box;
}
<div class="container">
  <span>foo</span>
  <span>bar</span>
  <form>
    <input value="baz">
  </form>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
SpaceDogCS
  • 2,808
  • 3
  • 20
  • 49
  • Seems to work... but can you explain what's going on? Why do I need to set the form to grow when I want it to shrink? It seems like your code works without the flex-grow being set, too? – aardvarkk Jan 29 '18 at 19:24
  • Also, from what I'm reading about `box-sizing` all it controls is whether padding and margin are included in size calculations, but the margin and padding take up almost no space so I don't understand why this works? – aardvarkk Jan 29 '18 at 19:26
  • the flex-grow maybe was a mistake, I was testing, but without the box-sizing the padding make the input to becomes bigger, and the flexbox dont consider the padding width, so it doesn't ajust – SpaceDogCS Jan 29 '18 at 19:27
  • OK -- it seems like just having `width: 100%` and `box-sizing: border-box` on the `input` tag is enough. Don't need to apply `box-sizing` to everything. If you're able to adjust your answer I will mark it as correct. Thanks for your help! – aardvarkk Jan 29 '18 at 19:28
  • yeas, ajusted, but I'd recommend you to use box-sizing in all elements – SpaceDogCS Jan 29 '18 at 19:30