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

Question

我有一个display: block的DIV display: block （ .out ）。

在这个DIV中有一个带display: inline-flex的flexbox display: inline-flex （ .row ）有一列（ .infos ），静态宽度为350px，另一列（ .dynamic ）应该有动态宽度，具体取决于内容。

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

请查看我的小提琴： 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/

Answer 1

使用width: 350px而不是flex-basis: 350px 。

在您的代码中， .row是第一个大小， .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> 

Answer 2

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

• align-self https://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-bottom https://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/

你可以玩保证金或自我对齐

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

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