内联柔性容器（display：inline-flex）正在扩展父容器的整个宽度 [英] Inline flex container (display: inline-flex) is expanding the full width of parent container

问题描述

我有一个DIV和 display：block （ .out ）。

在这个DIV中有一个带有 display：inline-flex （ .row ）的flexbox。有一列（ .infos ），其宽度为350px，另一列（ .dynamic ）应该有一个动态的宽度取决于内容。

现在我遇到了外部DIV（ .row ）在全屏幕上增长的问题。这不是我的用例。

请检查我的小提琴： https://jsfiddle.net/2ymx9oog/

< div class =出> < 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。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐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。在vero eos et accusam et justo duo dolores et ea rebum。没有海，没有海，就没有海。 < div class =dynamic> Lorem ipsum< / div> < / div>< / div>

/ p>

现在我认识到了我的问题：实际上我有另一个div之后的第三个div。这第三个div应该以第二个div结束，但是内容是很大的。有没有办法做到这一点？

结帐我更新的小提琴： https://jsfiddle.net/2ymx9oog/9/

解决方案

使用 width：350px 而不是 flex-basis：350px 。

， .row 首先将其内容的大小加在 width 上。由于 .infos 没有 width ，所以它的初始大小是由它的非常长的内容给出的。因此 .row 会填充其包含区块中的所有可用空间。在 .row 的大小之后，已经确定flex项目是flex并且 .infos 变成了 350像素。但是太晚了， .row 已经太宽了。

如果使用宽度：350px ， .row 将使用该值进行大小设置，而不会占用额外的空间。

< pre class =snippet-code-css lang-css prettyprint-override> .out {border：1px solid red;显示：块;位置：固定;顶部：0; left：0;}。row {display：inline-flex; flex-direction：row;填充：10px; border：1px solid yellow;}。infos {border：1px solid green; width：350px;}。dynamic {border：1px solid blue; flex：1 1;}

< div class =出> < 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。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐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。在vero eos et accusam et justo duo dolores et ea rebum。没有海，没有海，就没有海。 < div class =dynamic> Lorem ipsum< / div> < / div>< / div>

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/

解决方案

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>

这篇关于内联柔性容器（display：inline-flex）正在扩展父容器的整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！