Block Elements Only Inside Flex Item

Block elements only inside flex item?

You have set display: flex on both section as well as div.

If section acts as a container, you give display: flex to the section and leave the div as flex-items. Then the ps and h1s will float.

Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more {
    display: flex;
    flex-direction: column;
    ...
}
.fill-height-or-more > div {
    flex: 1;
    ...
}
.some-area > div p {
    width: 40%;
    float: left;
    ...
}

block element inside flex container do not behaves as expected

Because this is a flex row set to nowrap which means every flex child of the parent will be a cell/column in a horizontal row.

You will either need to use width: 100% or flex-basis: 100% on the h2 and also add flex-wrap: wrap to section, or you could just move the h2 above section...

section {       border: 1px solid red;        display: flex;        flex-direction: row;        flex-wrap: wrap;        justify-content: space-around;        align-items: stretch;    }
h2 {  display: block;  border: 1px solid red;  width: 100%;}

<section>               <h2>main title</h2>       <div>           <h3>title</h3>            <ul>            <li>element 1</li>            <li>element 2</li>            <li>element 3</li>            <li>element 4</li>            <li>element 5</li>            </ul>        </div>        <div>           <h3>title</h3>            <ul>            <li>element 1</li>            <li>element 2</li>            <li>element 3</li>            <li>element 4</li>            <li>element 5</li>            </ul>        </div>        <div>           <h3>title</h3>            <ul>            <li>element 1</li>            <li>element 2</li>            <li>element 3</li>            <li>element 4</li>            <li>element 5</li>            </ul>        </div></section>

How to make display inline-block only for the two elements inside flex?

Your #main-container has flex-direction: column so div's are displayed as columns.

It is necessary to add a container and just apply display: flex for it. By default display: flex has flex-direction: row:

#main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
}

#col1 {
    background: blue;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;

}

#col2 {
    background: yellow;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
    display: inline-block;
}

#col3 {
    background: green;
    flex: 1;
    display: inline-block;
    min-height: inherit;
}

#col4 {
    background: indigo;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;

}

.foo {
    display: flex;
}

<div id="main-container">
    <div id="col1">
      first
    </div>
    <div class="foo">
      <div >
        second
      </div>
      <div>
        third
      </div>
    </div>

    <div id="col4">
      fourth
    </div>
  </div>

Make a flex item act like display block

You should add a flex-basis: 100% to #menu, and allow the gray items to go to a new line by applying flex-wrap: wrap; to #container:

#container {  display: flex;  flex-wrap: wrap;}
#menu {  display: flex;  flex-basis: 100%;}
#menu p {  margin: 0;  padding: 8px;  padding-bottom: 0;}
.otherDivs {  height: 700px;  width: 10%;  background-color: grey;  margin-right: 5px;}

<div id="container">
  <div id="menu">
    <p>Btn</p>    <p>Btn</p>    <p>Btn</p>
  </div>
  <div class="otherDivs"></div>  <div class="otherDivs"></div>  <div class="otherDivs"></div>
</div>

Prevent flex items from overflowing a container

Your flex items have

flex: 0 0 200px; /* <aside> */
flex: 1 0 auto;  /* <article> */

That means:

The <aside> will start at 200px wide.
Then it won't grow nor shrink.
The <article> will start at the width given by the content.
Then, if there is available space, it will grow to cover it.
Otherwise it won't shrink.

To prevent horizontal overflow, you can:

Use flex-basis: 0 and then let them grow with a positive flex-grow.
Use a positive flex-shrink to let them shrink if there isn't enough space.

To prevent vertical overflow, you can

Use min-height instead of height to allow the flex items grow more if necessary
Use overflow different than visible on the flex items
Use overflow different than visible on the flex container

For example,

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  min-height: 50px; /* min-height instead of height */
}
main {
  display: flex;
}
aside {
  flex: 0 1 200px; /* Positive flex-shrink */
}
article {
  flex: 1 1 auto; /* Positive flex-shrink */
}

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

Elements in a flex container are not wrapping

An initial setting of a flex container is flex-wrap: nowrap. This means flex items are forced to remain in a single line.

You can override the default with flex-wrap: wrap.

The display value of flex items is ignored in flex layout.

A flex container, which is an element with display: flex or display: inline-flex, establishes a flex formatting context. Although similar to a block formatting context, there are differences.

One difference is that children of a flex container ignore the display property.

Another difference is that, in a flex container, margins don't collapse, and the float and clear properties have no effect.

A flex container also comes with several default settings. Among them:

justify-content: flex-start - flex items will stack at the start of the line
flex-shrink: 1 - flex items are allowed to shrink and will not overflow the container
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-direction: row - flex items will align horizontally
flex-wrap: nowrap - flex items are forced to stay in a single line

Note the last two items.

Flex items will line up in a row and cannot wrap.

If you want to have two flex items on the first line, and a third item on the second line, allow the container to be multi-line with flex-wrap: wrap.

.container {  display: flex;  flex-wrap: wrap;}.box {  flex: 0 0 45%;  height: 50px;  margin: 5px;  background-color: lightgreen;  border: 1px solid #ccc;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

Block Elements Only Inside Flex Item