Flexboxes Overlapping Instead of Pushing Aside

Flexboxes overlapping instead of pushing aside?

I think you are mis-using display:flex.

Maybe try using width:calc() and position:absolute;

Try this out:

demo

Also, I wanted to show you how you can animate that box without using jQuery

.column_2 {
    position: absolute;
    right: 0;
    width: 120px;
    height: 30px;
    background: green;

    -webkit-transition: 500ms width;
    -moz-transition: 500ms width;
    -ms-transition: 500ms width;
    -o-transition: 500ms width;
    transition: 500ms width;
}

.column_2:hover {
    width: 100%;
}

demo

CSS Flexbox : problem with overlaping flex items on smaller screens

You have set the height of your flex container to 100vh.
flexbox just does what you ask, squashing everything to fit in one window.

Just remove height: 100vh; from .container

Flex items not wrapping

Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.

In reference to your website (I didn't use your fiddle demo, which has different code), each of the non-wrapping elements is a <section> child of <section class="other">, which is a row-direction, wrap-enabled flex container.

Each <section> flex item has a flex: 1 applied. This translates to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

With flex-basis set to zero, the initial main size of the flex item is 0, and the width could shrink to that degree, so there's no opportunity to wrap.

I would suggest changing flex-basis: 0 to something like flex-basis: calc(33% - 2em) (i.e., width minus approx. margin, border, padding), for wider screens. So flex: 1 1 calc(33% - 2em).

And then for smaller screens, using a media query, set flex-basis to something like:

@media screen and ( max-width: 500px ) {
    .fitness, .education, .pastimes {
        flex-basis: 100%;
        display: flex; /* optional; for nicer alignment */
        flex-direction: column;  /* optional; for nicer alignment */ }
    }

Alternatively, if you wanted to avoid using media queries, you could set a fixed value to flex-basis which would enable wrap, as well. Something like flex: 1 0 200px.

Why do my list item bullets overlap floating elements

I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.

Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.

CSS Flex Justify-content dont push elements to each corner

You're giving your element an empty content :before & :after which is messing with your styles. Is there a particular reason why you're applying them to every element?

Remove the :before & :after and it should work as expected.

CSS

*:before,*:after{content:''} /* Remove this */

JSFiddle

Why is this happening?

Because with the :before & :after inside of your flex container, it sees 4 elements instead of the 2 you want the styles to apply to. I created an example of what is happening:

Example: Extra in-flow elements (your issue)

Using flex to push contents down without set widths

Flexbox can do that providing you use flex-direction:column like so:

If you don't want sections to expand to take up spare space, just remove the flex:1.

html,body {  height: 100%;}body {  min-height: 100%;  text-align: center;  /* for demo */}.page-wrap {  min-height: 100%;  display: flex;  flex-direction: column;}header {  background: pink;}footer {  background: rebeccapurple;  color: #fff;}aside {  flex: 1;  background: orange;}main {  flex: 1;  background: grey;}

<div class="page-wrap">  <header>    <h1>Header</h1>  </header>  <aside>I'm a secondary header</aside>  <main>I'm main content</main>  <footer>    <h1>Footer</h1>  </footer></div>

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

a {
  text-decoration: none;
}

img.mini {
  width: 20vw;
  height: 20vh;
  float: left;
  padding: 20px 10px 10px 10px;
}

.infobox {
  display: flex;
  flex-direction: column;
}

.popup {
  width: 50vw;
  flex-direction: row;
}

/* forces the selected element(s) to a new line: */
.infofoot {
  clear: both;
}

<section class="infobox">
  <main class="popup">
    <aside class="thumb"><img class="mini" src="image.jpg" /></aside>
    <article class="info">
      <h1>Heading Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
    </article>
    <footer class="infofoot">
      <a target="windowid" href="http://example.com">A single line of linked text.</a>
    </footer>
  </main>
</section>

.content.toggled {
  width: calc(100% - 300px);
}