Question

我在更大的页面中有一个侧边栏。所以我用float创建了一个div：right和width：30％。在div里面是一个前。根据浏览器窗口的大小，pre可能大于30％。所以文本从侧边栏的右边缘流出。

溢出让我说要放上滚动条。但我真正想做的是让div增长到适合前面的宽度。但我不能将宽度设置为自动，因为div中有其他文本，如果我将宽度设置为auto，它将填充屏幕的宽度而不是侧边栏。

在CSS中是否有任何方法可以设置最小宽度，但是让盒子增长以容纳一个pre，一个长的牢不可破的字符串等？

更新

好的，有人要求提供代码。这是一个精简的例子，展示了这个问题。

<html><title>Sidebar Test</title>
<div style="width:50%;float:right;border:1px solid black;">
<p>Here is some text for the sidebar. La di da di da. Here's more text.</p>
<pre>
This is a pre with a fairly long line.
</pre>
</div>
<p>Here's the non-sidebar text. Write a few lines worht of text here. Here we go.
Lorem ipsum whatever.
</p>
</html>

将其粘贴到文件中，然后缩小窗口，您会看到“这是一个带有很长行的前置”将延伸到侧边栏之外。

Answer 1

您拥有display:table / inline-table，有助于将广告框缩小/扩展到其内容。

您也可以设置min-width而不是宽度，以允许浮动框展开。

将display:table添加到您的代码段

的示例

#preonboard, #preonboard pre {
  border:dotted;
  display:table;
}

demo http://codepen.io/anon/pen/aqrIj

pre周围的内容，也会使这个浮动框也增长。您可以为这些其他内容设置最大宽度。

Answer 2

如果将包含div的显示设置为display: inline-block;，那么它将根据其子宽度增长/缩小。

CSS：任何使溢出力盒成长的方法？

2 个答案: