Flex box not working - html

Question

I am developing a web app with meteor and material design lite.
Here is what I want to do :
Here is the result with a too small window :
And here is the result with a bigger window :
The HTML code :
<template name="myRefrigerator_header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">My Refrigerator</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
<!-- Simple Textfield -->
<div id="msg-layout">
<form action="#">
<div class="mdl-textfield mdl-js-textfield" id="msg-layout-content">
<input class="mdl-textfield__input" type="text" name="content">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--primary"
id="msg-layout-add-button">
Enregistrer
</button>
</form>
</div>
</header>
</template>
And the CSS applied to it :
#msg-layout {
background-color: #F5F5F5;
margin: 0px 25px 15px 25px;
padding-left: 10px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
#msg-layout-content {
color: #3F51B5;
flex: 1 1 0;
}
#msg-layout-add-button {
}
I don't understand why I don't have the right behavior, I have specified that I only want one row and that my input should resize.
What am I getting wrong ?

Answer 1

First, you need to give the id="msg-layout" to the <form>. Only direct children of a display:flex layout will get the special attributes of flexible containers. You are negating flexbox by nesting a <form> where the flexible children would be. Your flexible layout only has one child, the <form>.
This is the best resource I have found for learning flex-box https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I would suggest trimming things down. Flex-box isn't the problem, and more that libraries of style rules make a lot of assumptions - that you may not be able to see from the top.
Here is a stripped down version / http://codepen.io/sheriffderek/pen/MKzMgp
HTML
<form class='this-form' action='#'>
<label class='input-w' for='sample1'>
<input type='text' id='sample1'>
<span>Text...</span>
</label>
<button>Enregistrer</button>
</form>
SCSS
* { // reset box model
box-sizing: border-box;
}
.this-form {
display: flex; // a
flex-direction: row; // b
align-items: center; // d
max-width: 24rem;
padding: .5rem;
border: 1px solid blue;
.input-w {
position: relative;
flex-grow: 1; // c
input {
width: 100%;
border: 0;
border-bottom: 1px solid gray;
&:focus {
outline: none;
+ span {
transform: translate(0, -50px);
opacity: 0;
}
}
}
span {
position: absolute;
bottom: 3px;
left: 0;
color: gray;
font-size: 12px;
transition: 1s;
}
}
button {
height: 30px;
background: transparent;
border: 0;
color: blue;
margin-left: .5rem;
}
}

Answer 3

The mdl-textfield__input class has a set width of 300px due to animation limitations. You need to override this (say width: 100%) to get an expandable textfield. However, this may have adverse affects on the animations since CSS animations don't like unknown lengths.