Flexbox items with block content overflow the flexbox container

Question

Problem

Block content like buttons causes my flex items to expand and overflow the flexbox container.

Expected Behavior

In this example, the buttons should remain side-by-side with the button text overflow hidden with ellipsis. The flex items widths should be based on siblings and not content, and stay inside the container remaining responsive as the container changes widths and flex items are added or removed. Another caveat is that I cannot use overflow:hidden on the flex items or the buttons parent div for my specific scenario.

Here is the fiddler.

Example Html

<div class="container" style="width: 400px;">

  <div class="child one">
    Child One
    <br>Lorem ipsum
    <br>dolor sit amet
  </div>

  <div class="child two"><div><button class="text">Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame</button><button>button two</button></div></div>

<div class="child three">Some Text</div></div>

Example CSS

div {
  border: 3px solid;
}

.container {
  padding: 10px;
  background-color: yellow;
  display: -webkit-flex;
  display: flex;
}

.child {
  flex: 1 1 auto;
  padding: 10px;
  margin: 10px;
  background-color: #eee;
}

.child.one {
  color: green;
}

.child.two {
  flex: 6 1 auto;
  color: purple;
}

.child.two button {
  display: inline-block;
}

.child.three {
  color: blue;
}

.text {
  text-overflow: ellipsis;
  overflow: hidden;
}

EDIT: Now, instead of trying to display multiple buttons, I'm changing the requirement to only one button. I would still be interested if somebody is able to solve it with multiple buttons.

This question is relatively complex and may benefit from being broken down into components. Consider multiple questions that tackle smaller problems. — Michael Benjamin, Jun 01 '16 at 18:34
The only thing simpler would be to remove the requirement for the buttons to display side-by-side. If there is a solution that renders that requirement moot I am all ears. — MplsAmigo, Jun 01 '16 at 18:44
I think the problem is that when the contents of the buttons are long, the browser doesn't know what width to render the button at and there isn't enough information for the browser to figure it out by itself so it defaults to trying to fit the contents. That's also why the overflow isn't being respected. Here's a fiddle with a possible solution. I cheated by removing the div wrapping the buttons. http://jsfiddle.net/y2eqmjsz/16/ — Jacob VanScoy, Jun 01 '16 at 19:21
Thanks everyone, I believe I have come up with a solution. Posted below. — MplsAmigo, Jun 01 '16 at 20:29

score 2 · Accepted Answer · edited May 23 '17 at 12:09

2

I have come up with the answer for those of you who are interested. However I have had to modify my initial requirements. Instead of trying to get two buttons to display side-by-side, I reduced it down to one button. Given that, here is the answer... This appears to work across browsers.

fiddle example of resolution

Add the following styles:

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}

I would be very interested in somebody explaining what is up with the width %? Seems like it is acting more like how min-width might work.

EDIT: Thanks to Michael_B for linking to the explanation of width relationship in flex items.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 01 '16 at 20:36

MplsAmigo

985
6
21

I suspected this was the problem but didn't have time today to dig into your question. You're bumping up against the minimum sizing algorithm on flex items. And you're right about the relationship between `width: 1%` and `min-width`. http://stackoverflow.com/a/36247448/3597276 – Michael Benjamin Jun 01 '16 at 23:24

Flexbox items with block content overflow the flexbox container

1 Answers1

Linked