我有一个带有两个元素的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。
小提琴：https://jsfiddle.net/2ymx9oog/9/
有什么想法吗？
答案 0 :(得分：1)
你已经在jsfiddle中有了这个：
row为什么不将它添加到margin: 10px，也可以third添加flex: 1，我想会这样做：
修改：
您可以做的一件事是从dynamic中移除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%;
}
的内容包装到相对于它的绝对容器中：
height如果您使用此选项，则必须为third指定.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><scenes> </scenes>
让我知道您对此的反馈。谢谢！