- 此问题在此处已有答案**：
How to match width of text to width of dynamically sized image/title?（2个答案）
昨天关门了。
我有一个Flex容器，它有flex-direction: column和两个子元素。两个子元素的内容都是dynamic，所以它们的大小/宽度可以变化。现在我想说明只有第二个元素可以决定最大宽度。所以只有第二个元素可以"增长"宽度。第一个元素应该只增长到第二个子元素的宽度。我该如何完成呢？
下面是一个例子，在这个例子中，宽度是由第一个元素决定的，因为它里面有更多的内容，但是我怎么能说宽度是由第二个元素决定的，而第一个元素正好"适合"这个宽度呢？
<div class="container">
<div class="first">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="second">
<ul>
<li>First item (with some information)</li>
<li>Second item (with some information)</li>
<li>Third item</li>
</ul>
</div>
</div>.container {
display: flex;
flex-direction: column;
}
1条答案
按热度按时间omhiaaxx1#
使用最小宽度。最小宽度覆盖宽度，如css-tricks中所述。我们使用宽度：min-content将宽度缩小到最窄，以容纳文本，然后使用min-width：100%来覆盖它并使它成为容器的宽度。通过缩小第一个div，这意味着第二个控制flex容器的整体宽度。
注意：我还更改了显示：柔曲到显示：内联柔曲。