9

I have a container which is 300px wide with two flexed divs inside.
The second one is 100px wide and the other should take up the remaining space.
When I place text wider than the remaining 200px in the first div, it overflows and I can use overflow: hidden and text-overflow: ellipsis to add the ... when the text overflows.
When I put a h1 tag within the first div and add the overflow and text-overflow should create the same effect.
And it does (in Chrome), but in IE and Firefox the div grows larger and the ellipsis doesn't work.
When I remove the additional h1 layer and update the css accordingly, the described behavior works as expected.

Or look at my JSFiddle

body{
    display: flex;
}

#container{
    display: flex;
    flex-basis: 300px;
    overflow: hidden;
}

#content{
    display: block;
    height: 300px;
    background-color: red;
    flex-grow: 1;
    flex-shrink: 1;
}

h1, h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#menu{
    display: flex;
    flex-grow: 0;
    height: 300px;
    background-color: blue;
    flex-shrink: 0;
}
<div id="container">
    <div id="content">
        <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1<h1>
    </div>
    <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>
Rick Hoving
  • 3,487
  • 3
  • 27
  • 48
  • in my chrome it is side by side but in ie it is over the top do you think it has something to do with the problem have you solve it? – Brownman Revival Jun 26 '15 at 09:41
  • Actually, it isn't over the top. In FF and IE the blue bar is actually made 0px wide. And the ellipsis doesn't work because the h1 is not actually overflowing, the container is overflowing (which is overflow hidden). Only Chrome adheres to the set flex basis of the container and the flex grow of the menu. FF and IE shrink the menu regardless of the `flex-shrink: 0` – Rick Hoving Jun 26 '15 at 09:51
  • Why not set width in % ?? – Enrico Jun 26 '15 at 09:55
  • updated [jsFiddle](https://jsfiddle.net/t20bgvdx/14/) If this works for you, remember to use the clearfix for floating elements – Enrico Jun 26 '15 at 10:05
  • @Enrico thanks for the fiddle, however I am prohibited to use floats (requirements). Also I don't use percentages because in my full application, the menu is a fixed px and the content should take the left over width. – Rick Hoving Jun 26 '15 at 11:22

2 Answers2

18

Add this:

#content {
  min-width: 0;
}


body{
  display: flex;
}
#container{
  display: flex;
  flex-basis: 300px;
  overflow: hidden;
}
#content{
  display: block;
  height: 300px;
  background-color: red;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}
h1, h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu{
  display: flex;
  flex-grow: 0;
  height: 300px;
  background-color: blue;
  flex-shrink: 0;
}
<div id="container">
  <div id="content">
    <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1</h1>
  </div>
  <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>

You need it because the Flexbox module changed the initial value of min-width:

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

Oriol
  • 225,583
  • 46
  • 371
  • 457
1

Your problem here is with the content div, the display: block; property seems to be eliminating the effect of flex display in IE, when I changed it to display: flex; it worked.

It seems also that the content is getting overflown relative to the body which is also in display:flex due to the flex-basis: 300px; in the container, and the h1 element relative to the #content element is not being overflown that's why the ellipsis doesn't work.

Seems to work on firefox version 29.0, please note that the flex behavior is fully suuported starting from firefox 28+,

check http://caniuse.com/#feat=flexbox for more info

enter image description here

KAD
  • 10,375
  • 4
  • 25
  • 60