内联弹性容器（显示：inline-flex）正在扩展父容器的整个宽度

Question

display: block我有一个带有( )的 DIV .out。

在此 DIV 中，有一个带有display: inline-flex( .row) 的 Flexbox，其中一列 ( .infos) 的静态宽度为 350 像素，另一列 ( .dynamic) 应根据内容具有动态宽度。

.row现在我遇到了外部 DIV ( ) 在全屏上增长的问题。那不是我的用例。我想要一个动态的外部 DIV。

请查看我的小提琴：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>

编辑：

现在我认识到了我的问题：实际上我在其他 div 之后有第三个 div。第三个 div 应该以第二个 div 结尾，但它的内容太大了。有什么办法可以做到这一点吗？

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

Answer 1

使用width: 350px而不是flex-basis: 350px.

在您的代码中，首先对其内容.row求和。width由于.infos没有width，其初始大小由其非常长的内容给出。因此.row填充其包含块中的所有可用空间。在 的大小.row确定后，弹性项目会弯曲并.infos变为350px。但那时已经太晚了，.row已经太宽了。

如果您使用width: 350px,.row将使用该值调整大小，而不占用额外空间。

.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>