JV3 JV3 - 1 month ago 12
CSS Question

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

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>




Answer

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>