CSS：在不拉伸的情况下将宽元素装配到div中

我试图将一个非常宽的

div

添加到一个现有的、非固定大小的

div

。下面是一个最小的示例（）：

• 一些Mozilla供应商的前缀为

  宽度

  （

  min content

  ，

  fit content

  ，

  可用），但它们似乎都没有我想要的效果

---

简而言之，我希望在这个页面上有一个与上面列出的HTML代码非常相似的效果，但是这个页面通过在问题容器上设置一个固定的宽度来实现它。这样做可能吗？

在不设置固定宽度的情况下，我能想到的唯一方法是：

将内部div宽度设置为0，并强制使溢出可见。 然后在外分区上，将溢出设置为自动，滚动条将出现在外分区上。 如果您想要在内部div上显示滚动条，那么您就不走运了

---

这不是世界上最好的解决方案，因此我建议将侧边栏设置为具有最大宽度属性，如中所示。

正如我在评论中所说，如果不实际指定该限制，则不可能限制宽度。 您是否有关于页面上列大小的指南，例如百分比或设置主列宽？否则，页面不知道要为每个列分配多少空间，页面的外观将不可预测

我想您不想设置宽度的原因是，您可以使用屏幕的全部可用宽度。因此，我建议您使用百分比，例如右侧侧栏的30%。这提供了一个可预测的布局，还允许您在内部内容上实现所需的滚动条，因为您已经在外部分区上指定了限制

<div style="float: right; width:50%">
    Some content
    <div id="problematic-div" style="overflow-x: scroll; width: 100%;">
        This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
        It_should_have_a_horizontal_scrollbar_instead
    </div>
    Some content here too
</div>

一些内容
这是一根很长的不易断的绳子，但我不想让它有能力伸展这个分区

它应该有一个水平滚动条
这里也有一些内容

---

您需要测试跨浏览器，但它应该在大多数浏览器中都能工作）

您知道

overflow:hidden

和

overflow-x:hidden

吗？如果没有，请尝试。@David

overflow:hidden

在这里不适用，因为容器上没有设置特定的宽度，因此没有溢出。啊，当然。这是有道理的。我现在明白了。如果我理解正确的话，你想做的在逻辑上是不正确的。通过不指定外部div的宽度，您实际上是在告诉它拉伸以适应其内容。这是您想要的吗？你可能需要固定边栏的宽度。我不会用这个代码得到任何滚动条。但是我同意你关于设置另一列的宽度的建议。在没有实际设置限制的情况下对元素的宽度设置限制是不可能的，OP正试图这样做！使用Firefox12，我可以得到一个滚动条。这段代码在Google Chrome中似乎有着不同的效果。我们找到了一种基于这段代码的方法，这样滚动条就会显示在正确的位置：但实际上，它似乎只在Firefox中起作用+我还是很感谢你close@EtiennePerot，即使你想把你的客户端限制在Firefox上，这也是一种“黑客行为”（没有冒犯Xthexter的意思，但我想你已经知道了：））所以你不能指望它在未来的Firefox版本中工作。一句忠告——现在的屏幕宽度有很大的差异，因此很难开发出一个适合屏幕宽度的页面，并且仍然保持可用性和可读性——在手机等小型设备上，你将没有足够的两列空间来容纳内容可读性；在大屏幕上，行太长，这使得它们难以阅读-阅读的最佳宽度被认为是60-75个字符。

<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
    This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
    It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too

<div style="float: right; width:50%">
    Some content
    <div id="problematic-div" style="overflow-x: scroll; width: 100%;">
        This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
        It_should_have_a_horizontal_scrollbar_instead
    </div>
    Some content here too
</div>