{"action":"created","issue":{"url":"https://api.github.com/repos/philipwalton/flexbugs/issues/63","labels_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/63/labels{/name}","comments_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/63/comments","events_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/63/events","html_url":"https://github.com/philipwalton/flexbugs/issues/63","id":90520805,"number":63,"title":"Truncated text within flex containers breaks out rather than being contained/truncated","user":{"login":"stefsullrew","id":676213,"avatar_url":"https://avatars.githubusercontent.com/u/676213?v=3","gravatar_id":"","url":"https://api.github.com/users/stefsullrew","html_url":"https://github.com/stefsullrew","followers_url":"https://api.github.com/users/stefsullrew/followers","following_url":"https://api.github.com/users/stefsullrew/following{/other_user}","gists_url":"https://api.github.com/users/stefsullrew/gists{/gist_id}","starred_url":"https://api.github.com/users/stefsullrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stefsullrew/subscriptions","organizations_url":"https://api.github.com/users/stefsullrew/orgs","repos_url":"https://api.github.com/users/stefsullrew/repos","events_url":"https://api.github.com/users/stefsullrew/events{/privacy}","received_events_url":"https://api.github.com/users/stefsullrew/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2015-06-23T23:50:57Z","updated_at":"2015-08-15T00:39:27Z","closed_at":"2015-07-09T01:45:17Z","body":"I've found an interesting bug and a partial solution. I have text that is truncated inside a flex media object (and flex grids). In FFOX and IE, the truncated text doesn't truncate (Chrome, Safari and Edge work as expected). The truncated text takes up its full length, rudely smashing anything in its path. I created a minimum test case here: http://codepen.io/stefsullrew/pen/Kpyarb\r\n\r\nI was able to fix the FFOX problem by adding min-width:0 to both the .col of my grid and the body of the media object (and I understand that's probably ok and Chrome is about to implement the same default now). My trouble remains with IE 11.\r\n\r\nPhilip, you'll see the code of your flexi media object in my Pen. My first problem was, I had no text showing at all (with the truncation class) in IE. I changed the `flex:1` on the media object's body to `flex: 1 1 auto;` and that was fixed. But IE still wants a pixel-based max-width on the truncated text, not a percentage-based, to truncate. Very aggravating since this needs to be responsive and my designer doesn't want to add a width. \r\n\r\n(I am able to truncate in IE in grids that have explicit percentage widths set on the columns.) I'd love to hear the thoughts of you wise flexperts here. :)"},"comment":{"url":"https://api.github.com/repos/philipwalton/flexbugs/issues/comments/131273579","html_url":"https://github.com/philipwalton/flexbugs/issues/63#issuecomment-131273579","issue_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/63","id":131273579,"user":{"login":"stefsullrew","id":676213,"avatar_url":"https://avatars.githubusercontent.com/u/676213?v=3","gravatar_id":"","url":"https://api.github.com/users/stefsullrew","html_url":"https://github.com/stefsullrew","followers_url":"https://api.github.com/users/stefsullrew/followers","following_url":"https://api.github.com/users/stefsullrew/following{/other_user}","gists_url":"https://api.github.com/users/stefsullrew/gists{/gist_id}","starred_url":"https://api.github.com/users/stefsullrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stefsullrew/subscriptions","organizations_url":"https://api.github.com/users/stefsullrew/orgs","repos_url":"https://api.github.com/users/stefsullrew/repos","events_url":"https://api.github.com/users/stefsullrew/events{/privacy}","received_events_url":"https://api.github.com/users/stefsullrew/received_events","type":"User","site_admin":false},"created_at":"2015-08-15T00:39:27Z","updated_at":"2015-08-15T00:39:27Z","body":"Hey @philipwalton and @gregwhitworth - Even though this is closed, I'm going to leave the solution here for others. I've commented the new pen I forked from my first one. The solution was a couple of things. \r\n\r\nFirst, I took Philip's advice and changed from using justify-content: space-between:... to simply setting the second .col not to flex (which has the same effect).\r\n\r\nSecond, I reverted my .Media-body back to flex:1; as it had originally been, — but left the min-width:0; which has become important due to the changes in the flexbox spec.\r\n\r\nThird, I added a class that we're finding very useful since we truncate loads of things and use a lot of flexbox. We call it .has-flexi-truncate, and it goes on the .col that contains the nested flexi-object that has the truncation inside (in this demo, it's the media object).\r\n\r\nHope this helps someone. I made notes in the new pen indicating what I changed since there's not a compare feature: http://codepen.io/stefsullrew/pen/WvWWqJ?editors=110"}}