我有一个带有
在这个DIV中,有一个具有
现在我遇到了一个问题,外部DIV(
请查看我的fiddle:https://jsfiddle.net/2ymx9oog/
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/