flex - wrap test

by Andy Bulka

HTML

<div id="main">
  <div style="background-color:coral;">RED</div>
<textarea>
    This is some content.  And more content.  And even more. When will it stop.
    This is some content.  And more content.  And even more. When will it stop.
    This is some content.  And more content.  And even more. When will it stop.
    This is some content.  And more content.  And even more. When will it stop.
    This is some content.  And more content.  And even more. When will it stop.
    This is some content.  And more content.  And even more. When will it stop.
  </textarea>

  <div style="background-color:lightgreen;">Green div with more content.</div>
  <div style="background-color:yelloe;">Yellow div with more content.</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
  <div style="background-color:cyan;">Cyan div with more content.</div>


</div>

CSS

#main {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;

    /* width: auto; */
    height: 200px;
    border: 1px solid black;
    /* flex-flow: row; */
}

#main div {
  
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  
  /* MUST REMOVE FLEX FROM CHILD OTHERWISE IT WON'T WRAP */
  /* flex: 1; */
  
  /* width: 150px; */
  /* height: 50px; */
}