Flex box not working

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/