如何强制子div溢出它的父宽度，但仅限于屏幕的宽度

Question

让我先从JSFiddle示例开始 - click here。

问题在于使用类class="overflow-parent"的div的样式/定位。该类的名称是当前问题的描述，但实际上它是应该显示网站内容的div。

水平div和带红色边框的垂直div用于我将提供的导航功能，我希望我的内容显示在其中，就此示例而言：

• 内容（带有aaaaa..段的带绿色边框的div应位于红色垂直菜单的旁边，而不会像现在一样发生溢出。
• class="overflow-parent"应该在右侧溢出它的父级，但只能达到屏幕大小。现在不是你能看到的 - 用水平滚动。

另外作为子问题 - 我希望我的垂直菜单（红边div）至少与显示器的高度一致，如果内容大于屏幕的高度则调整它的高度为等于应该显示页面内容的<div class="overflow-parent">。

另外 - 我没有太多的设计经验，但结构和方法完全是我的，并且可以有更好和/或更简单的方法来实现最终结果，我不介意这样的答案。只是为了保持现在的最终外观（没有问题）。

修改 保持导航居中非常重要，这就是.container类

的原因

.container {
  width: 970px;
  padding-left: 0px;
  padding-right: 0px;
  margin-right: auto;
  margin-left: auto;
}

我需要它970px;并居中，因此预计两端都会有空白区域。棘手的部分是，由于垂直菜单，左侧将保持空白，但我想使用右侧最大但不超过屏幕的宽度。

Answer 1

内容（带有aaaaa ..段的绿色边框div应位于红色垂直菜单的旁边，而不是像现在一样发生溢出。

删除position: absolute;

class =“overflow-parent”应该在右侧溢出它的父级，但只能达到屏幕的大小。现在不是你能看到的 - 用水平滚动。

将宽度设置为自动（width: auto;）应解决此问题。

我添加了一些属性：

到.vertical-menu

width: 25%;

到.overflow-parent

  width: auto;
  max-width: 72.6%; /* -(.4%) to compesate the border width */
  word-wrap:break-word; /* To prevent big words to break the layout */

http://jsfiddle.net/A5wge/4/