Inline flex container (display: inline-flex) is expanding the full width of parent container

Question

I have a DIV with display: block (.out).

In this DIV there is a flexbox with display: inline-flex (.row) that has one column (.infos) that has a static width of 350px, and another column (.dynamic) which should have a dynamic width depending on the content.

Now I have the problem that the outer DIV (.row) is growing on the full screen. That's not my use case. I want a dynamic outer DIV.

Please check out my fiddle: https://jsfiddle.net/2ymx9oog/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
}

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

EDIT:

Now I recognized my problem: In reality I have a third div after the other div's. This third div should end with the second div, but it's content is to large. Is there any way to do that?

Checkout my updated fiddle: https://jsfiddle.net/2ymx9oog/9/

What do you mean by "the outer DIV is growing on the full screen." ? — James, Nov 01 '16 at 17:52

Oriol · Accepted Answer · 2016-11-01T18:30:53.113

5

Use width: 350px instead of flex-basis: 350px.

In your code, .row is first sized summing the width of its contents. Since .infos has no width, its initial size is given by its very long content. So .row fills all the available space in its containing block. It's after the size of .row has been determined that the flex items do flex and .infos becomes 350px. But then it's too late, .row is already too wide.

If you use width: 350px, .row will be sized using that value, without taking extra space.

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  width: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
}

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

edited Nov 01 '16 at 18:30

answered Nov 01 '16 at 18:22

Oriol

274,082
63
437
513

@Michael_B I added the explanation. But now I don't remember if it's supposed to behave like this or if it's a common bug. – Oriol Nov 01 '16 at 18:27
[**spec**](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property): *`flex-basis` is resolved the same way as `width` in horizontal writing modes* – Michael Benjamin Nov 01 '16 at 18:29
@Michael_B I'm not sure if that refers only to the computed value of `flex-basis`. From [Flex Item Intrinsic Size Contributions](https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions) it seems the flex base size only clamps the contribution when the flex item is not growable or shrinkable. – Oriol Nov 01 '16 at 18:44
The person who wrote [that section of the spec](http://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions), may be the same person who wrote [this section of the spec](http://stackoverflow.com/questions/40325236/in-the-css-visual-formatting-model-what-does-the-flow-of-an-element-mean) (from previous spec language we struggled to understand), and should be tarred and feathered. Seriously, I don't see any reason why it needs to be so confusing. – Michael Benjamin Nov 01 '16 at 18:52
Works fine. Incredible! I didn't expect the solution at this position of the code. – JV3 Nov 01 '16 at 19:18

G-Cyrillus · Answer 2 · 2016-11-01T18:07:45.287

If i understand right, margin or align-self should do it:

align-self https://jsfiddle.net/2ymx9oog/1/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
  align-self:flex-start
}

<div class="out">
<div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
    Lorem ipsum
    </div>
  </div>
  
</div>

margin-bottom in this case https://jsfiddle.net/2ymx9oog/2/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
  margin-bottom: auto
}

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

if it is about the width too, then remove the flex property : https://jsfiddle.net/2ymx9oog/4/

For both earlier example see results here :

margin https://jsfiddle.net/2ymx9oog/3/
align-self https://jsfiddle.net/2ymx9oog/5/

You can play with margin or align-self

example with margin:auto without flex values set https://jsfiddle.net/2ymx9oog/6/ set your dynamic box in the middle within the right area

You may set it at middle top, at middle middle, middle bottom, left top, left bottom, left middle, and so on

Inline flex container (display: inline-flex) is expanding the full width of parent container

2 Answers2

Linked