What's wrong with my form css?

1

hi guys. i’m working on making a personal page. i am doing parts of it on codepen for the instant visual feedback. i got most of what i wanted down. i went with flexbox, out of unfounded aversion to bootstrap, (i know there are some vendor prefixes missing form my code) but as far as chrome is considered, everything works as intended, with some odd margin bug that’s fixed on resize, but here’s the deal:

the input fields stretch fully inside their div. they stay the

form.png1404×664 61.5 KB
same size on focus too, but once start entering data, the input field shrinks and resizes back to normal once out of focus.

i tried all sorts of stuff like display: block, modifying width values which sort of worked but not consistent across the board, flex values, but nothing works. am i missing some kind of pseudo here?

2

Sup mate! Just so i understand you, you wanted it to stretch full width when it’s focused?

3

yes mate. it’s odd that the form fields shrink and then resize to their normal width.

thanks

4

You can link to your codepen?

5

sure here it is. http://codepen.io/baron/pen/ZLvwOP

there is a whole bunch of fluff there cuz i am reusing the css for the whole page. you can scroll down a bunch to skip it.

6

lol i think i juts fixed it. changed the column from wrap to nowrap. and it’s not jumping around like crazy anymore