CODEWITHSUNDEEP
cssgoogle-chromeflexbox
Senica Gonzalez
Senica Gonzalez

Reputation: 8192

CSS3 flex: input box specific width, input box is overflowing

Could someone shed some light on this jsFiddle behaviour? http://jsfiddle.net/zZgmn/1/

What I want to do is have the input[type=text] box to be a specific width. However, with the flex-direction set to row, the input box refuses to change size.

If however you set the flex-direction to column, you can see that the text box will change to the specified width?

If I take off the width, I would imagine that the text box should flex to fill the content if it can, but it doesn't.

I seem to be missing something.

I've tried many variations, but the one I understand should work for setting the width is -webkit-flex:0 0 32px; But this does not seem to have any bearing.

Edit

This image shows the rendered input box. It is not 5px wide. Input Overflow

This image shows the rendered flex area of the parent into which the input box should fit inside. Parent Width

Upvotes: 1

Views: 1910

Answers (1)

Senica Gonzalez
Senica Gonzalez

Reputation: 8192

Got it!

So you have to add a size to your input box. <input type="text" size="2" />

Hopefully this helps someone.

Upvotes: 6

Related Questions