Html元素没有采用绝对定位和flexbox内部的全宽度

Question

右侧的灰色块（ https://jsfiddle.net/var6u4g7/ ）不占用其内容的全部宽度。 它使用righttext的大小，如果在righttext元素中添加更多单词，您将看到灰色框正好占据了该宽度。 我不想指定一个固定的宽度，因为我不知道它里面有多少，所以我希望它的内容和它的内容一样宽。

如果你删除第一个元素上的display: flex ，那么宽度会起作用但其他东西会破坏。 （如果你删除灰色框，你会看到我需要display: flex 。灰色框有时只出现，当它不存在时，该行中的所有内容应该垂直居中对齐。是否有办法使这项工作？

 .container { display: flex; align-items: center; background-color: yellow; } .leftside { margin-right: auto; } .rightside { position: relative; } .righttext { background-color: red; margin-top: 10px; margin-bottom: 10px; } .absolute { position: absolute; right: 0; top: 0; background-color: gray; } 

 <div class="container"> <div class="leftside">Lorem ipsum dolor sit amet.</div> <div class="rightside"> <div class="righttext"> Lorem ipsum. </div> <div class="absolute"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> 

Answer 1

目前还不清楚你究竟在寻找什么，但如果我理解正确，你想要红色和灰色的盒子是全宽的。 您可以通过添加flex: 1到.rightside和width: 100%;来完成此操作width: 100%; .absolute 。 flex属性表示某个元素应该优先。 它是flex-grow: 1的简写flex-grow: 1 。