html - 具有三个 DIV 的 Flexbox 容器

Question

我有一个 flexbox，它有两个应该相邻的元素。第一个 DIV 的静态宽度为 350px。第二个 DIV 是动态的。宽度取决于内容。

现在我创建了第三个 DIV，其内容也是动态的。但是这个DIV应该限制在第二个DIV的末尾。所以内容应该换行到第二个 DIV 结束的宽度。

.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;
}
.third {
  border: 1px solid pink;
}

<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 class="third">
    accusam et justo duo dolores et earebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem    ipsum dolor sit a
  </div>
</div>

我知道:在此示例中，第三个 DIV 在 flexbox 之外，但我认为解决方案连接到 flexbox。

fiddle :https://jsfiddle.net/2ymx9oog/9/

有什么想法吗？

Answer 1

你的 jsfiddle 中已经有了这个:

.outRow {
  display: inline-flex;
  flex-direction: column;
}

为什么不将它添加到 row 中，也许 margin: 10px 用于 third，我想这样可以:

编辑:

您可以做的一件事是从 dynamic 中删除 flex: 1 并将 third 的内容包装到相对于它:

.third {
  border: 1px solid pink;
  margin: 10px;
  position:relative;
  height: 100px;
  overflow-y: auto;
}
.third div{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

如果选择此选项，则必须为 third 指定height。

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.outRow {
  display: inline-flex;
  flex-direction: column;
}

.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;
}
.third {
  border: 1px solid pink;
  margin: 10px;
  position:relative;
  height: 100px;
  overflow-y: auto;
}
.third div{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

<div class="out outRow">
    <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 class="third">
      <div>
    Lorem ipsum dolor sit amet, 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
        </div>
    </div>

</div>

让我知道您对此的反馈。谢谢!