2

I have a 2 column flexbox layout.

The first column has a child element (an image) that is quite large. The reason it's large, is so it looks good on Retina displays. The image use max-width:100% to scale.

In Chrome the layout works fine. But in Firefox/IE, the image breaks the layout. Is there any way to get it display properly?

Here is a Codepen of the layout: http://codepen.io/madhusharma/pen/YXNbVE

Here is the HTML:

<div class="container">

<div class="unit-body reading-style">
<div class="unit-aside">
<img src="http://placehold.it/1077x1000"/>
</div>

<div class="unit-main">
<p>Text</p>
</div>
</div>

</div>

Here is the CSS:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  max-width:960px;
  margin:auto;
}

.unit-body {
  display: flex;
  flex-flow: row wrap; 
}

.unit-aside {
    flex: 1 50%;
  padding: 10px;
}

.unit-main {
  flex: 1 50%;
  padding: 10px;
}

img {
  max-width:100%;
  height:auto;
}
big_smile
  • 1,487
  • 4
  • 26
  • 59
  • 1
    `flexbox` is overkill on a simple 2-column layout like this. It can be easily achieved with floats and collapsed with media queries. While `flexbox` is great (I use it all the time on production sites), it does still suffer from some browser-specific bugs, only use it when you have to. – Adam Jenkins Jun 01 '15 at 18:42
  • 1
    (Couldn't edit my comment) - if you need control over vertical alignment, you could also use `.unit-body { display: table; }` and `display: table-cell` on `.unit-main` and `.unit-aside` – Adam Jenkins Jun 01 '15 at 18:48
  • @Adam, thanks. I am doing this layout as practise learning Flexbox. For a live site, I would probably use either table or floats. However, so far, the Flexbox actually works quite well, so I might use it after all! – big_smile Jun 02 '15 at 10:10

1 Answers1

2

Try removing flex-flow: row wrap; from .unit-body.

Also, it seems that Firefox is handling this incorrectly, I found this answer: https://stackoverflow.com/a/26916542/152016

Add min-width:0; to .unit-aside and it should work.

Community
  • 1
  • 1
Niloct
  • 9,491
  • 3
  • 44
  • 57