显示大于其父DIV的DIV

Question

我想要在同一行上显示2个DIV（一个在左边，另一个在右边）。

左边的div：

.leftdiv {
    position: relative;
    display: inline-block;
    width : 30%;
}

正确的：

.right-div {
    float : right;
    width : 40%;
    background-color: lime;
}

左侧DIV包裹了另外两个DIV：dropdown-content，点击dropdiv后显示。

我希望dropdown-content占据页面的一半（50％），但即使我将其宽度设置为100％，我也不能让它比其父leftdiv更大（不得超过30）页面的百分比）。

如何解决这个问题？

JS Bin

Answer 1

您可以将其设置为50vw（视口宽度的50％）。

Answer 2

从position:relative;移除.leftdiv并在width: 50%;上设置.dropdown-content

我认为它应该适用于每个浏览器