内联弹性容器（display: inline-flex）正在扩展父容器的完整宽度。

Question

内联弹性容器（display: inline-flex）正在扩展父容器的完整宽度。

htmlcssflexbox

4

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

在这个DIV中，有一个具有 display：inline-flex (.row)的flexbox，其中有一列(.infos)具有静态宽度350px，另一列(.dynamic)的宽度应取决于内容动态变化。

现在我遇到了一个问题，外部DIV(.row)正在充满整个屏幕。这不是我的使用情况。我想要一个动态的外部DIV。

请查看我的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>

编辑：

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

请查看我的更新后的代码: https://jsfiddle.net/2ymx9oog/9/

- JV3

“外部DIV在全屏上增长”是什么意思？ - James

你的外层 div 只是需要一个 max-width 属性吗？ - mikestreety

不允许最大宽度。 - JV3

2个回答

0

如果我理解正确，margin或align-self应该可以实现：

align-selfhttps://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-bottomhttps://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>

如果宽度也有问题，那就移除flex属性: https://jsfiddle.net/2ymx9oog/4/

查看前面两个示例的结果：

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

你可以尝试使用margin或align-self

没有设置flex值的margin:auto示例 https://jsfiddle.net/2ymx9oog/6/ 把你的动态框置于右侧区域的中心位置

你可以将它放在中上、中间、中下、左上、左下、左中等位置

- G-Cyrillus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

请使用width: 350px代替flex-basis: 350px。

在你的代码中，.row首先通过对其内容的width求和来确定大小。由于.infos没有width，其初始大小由其非常长的内容确定。因此，.row填充了其包含块中所有可用的空间。在确定.row的大小后，flex项目才开始弹性伸缩，.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>