Question

我有一个cellattr: function (rowid, cellValue, item) { if (cellValue == null || parseFloat(cellValue) === 0) { return ' style="color:red"'; } }（total）的DIV。

在此DIV中，有一个display: block（.out）的弹散框，其中一列（display: inline-flex）的静态宽度为350px，另一列（.row }）应具有动态宽度，具体取决于内容。

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

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

.dynamic

.row

编辑：

现在我认识到了我的问题：实际上我在另一个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>

Answer 2

如果我理解正确，margin或align-self应该这样做：

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

＆＃13;

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

＆＃13;

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

＆＃13;

margin-bottom https://jsfiddle.net/2ymx9oog/2/

＆＃13;

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

＆＃13;

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

＆＃13;

如果大约是宽度，则删除flex属性：https://jsfiddle.net/2ymx9oog/4/

对于前面的两个示例，请参见此处的结果：

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

您可以使用margin或align-self

保证金的示例：自动无灵活值设置https://jsfiddle.net/2ymx9oog/6/将动态框设置在右侧区域的中间

您可以将它设置在中间顶部，中间中间，中间底部，左上角，左下角，左中间等等

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

2 个答案: