Unable to get flex row to appear on new line full width

Question

In the code snippet below, I'm trying to get the "0 of 2 completed" to appear on a new line at full width. I'm attempting to do so with flex box but I'm starting to think that it's not meant to be used in this way. What's the best way to accomplish this?

.container {
  display: flex;
  width: 400px;
  height: 40px;
  border: 1px solid blue;
}

.container > div {
  height: 20px;
}

.dragHandle {
  flex: 0 0 20px;
  background-color: rgba(0,0,0,0.2);
}

.checkbox {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.input {
  flex: 0 0 auto;
  flex-grow: 1;
  background-color: rgba(0,0,0,0.1);
}

.avatar {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.footer {
  /* appear on new line */
}

<div class="container">
  <div class="dragHandle"></div>
  <div class="checkbox"><input type="checkbox" /></div>
  <div class="input">Task title</div>
  <div class="avatar"></div>
  <div class="footer">0 of 2 completed</div>
</div>

score 1 · Accepted Answer · answered Feb 06 '18 at 08:24

Simply make it width:100% and add flex-wrap:wrap to container:

.container {
  display: flex;
  width: 400px;
  height: 40px;
  border: 1px solid blue;
  flex-wrap:wrap;
}

.container > div {
  height: 20px;
}

.dragHandle {
  flex: 0 0 20px;
  background-color: rgba(0,0,0,0.2);
}

.checkbox {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.input {
  flex: 0 0 auto;
  flex-grow: 1;
  background-color: rgba(0,0,0,0.1);
}

.avatar {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.footer {
  width:100%; /* Or flex: 0 1 100% Or flex-basis:100%*/
}

<div class="container">
  <div class="dragHandle"></div>
  <div class="checkbox"><input type="checkbox" ></div>
  <div class="input">Task title</div>
  <div class="avatar"></div>
  <div class="footer">0 of 2 completed</div>
</div>

score 0 · Answer 2 · edited Feb 06 '18 at 03:32

I would add a new div, inside the container, that would include all the other divs except the footer, then set the new div as display: flex, instead of container. That worked for me. Also consider using the tag footer instead of div class footer:

.container {
  width: 400px;
  height: 40px;
  border: 1px solid blue;
   }
#newDiv {
   display: flex;
   }

<body>
  <div class="container">
    <div id="newDiv">
      <div class="dragHandle"></div>
      <div class="checkbox"><input type="checkbox" /></div>
      <div class="input">Task title</div>
      <div class="avatar"></div>
    </div>
    <footer>0 of 2 completed</footer>
   </div>
</body>

Unable to get flex row to appear on new line full width

2 Answers2