Multiple fixed size div's auto line break

Question

My Goal is to have a DIV that contains other fixed sized DIVs. Those DIVs should contain a line break (only) if necessary. So it should look like the following:

No line breaks necessary:

_______________________________
|   ____   ____   ____        |
|   |__|   |__|   |__|        |
|                             |
|                             |
|_____________________________|

Line break necessary:

_______________________________
|   ____   ____   ____   ____ |
|   |__|   |__|   |__|   |__| |
|   ____                      |
|   |__|   ...                |
|_____________________________|

Currently, the best I could come up is the following:

<div id="outer">
    <div>
        <p>Some text</p>
    </div>
    ...
</div>

<style>
#outer {
    overflow: auto;
}
#outer div {
    display: inline;
    border: 1px solid black;
}
#outer div p {
    width: 60px;
    height: 60px;
    Display: inline-block;
}
</style>

Does anybody have an idea on how to achieve this?

Answer 1

Hope this will help you and resolve your query, let me know any issues @thomas

#outer {
    overflow: auto;
  border:1px solid #ff0000;
  padding:10px;
}
#outer div {
    display: inline-block;
    border: 1px solid black;
    margin:0px 1% 2% 1%;
}
#outer div p {
    width: 60px;
    height: 60px;
    margin:0px;
    display: inline-block;
}

<div id="outer">
    <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
    ...
</div>