Block elements only inside flex item?

css, flexbox

Solution

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 `p`s and `h1`s 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;
    ...
}

Problem

Apparently, you can only have block elements (inline, inline-block, float nothing works) inside a flex item container? Thats just weird and doesn't seem useful unless I'm doing it completely wrong? Here is the pen: http://codepen.io/iaezzy/pen/GggVxe ``` .fill-height-or-more { min-height: 100%; display: flex; flex-direction: column; } .fill-height-or-more > div { flex: 1; display: flex; flex-direction: column; justify-content: center; } ``` You might have to increase the preview pane height for the flexbox to work. Edited for clarity: I'm not talking about the flex items themselves, but the elements INSIDE the flex item. In the codepen above, you'll see `h2` and `p` bordered, they have the `float` declaration, but don't float.

Original source