如果子宽度是动态的，如何使子div不超过其父宽度

Question

在我的jsp中，我有一个div，其宽度由javabean值决定。基本上它被用来填补一个酒吧。有时值大于100，因此宽度变为300％（例如），因此超出父边界。

我需要知道，我如何限制子div的宽度，使其不超过父边界。

谢谢。

Answer 1

我刚刚使用了之前的回复组合，它对我有用。 在我的情况下，我不想硬编码任何像素值，但让我的子元素流动生长并缩小到其父元素宽度。

用于父overflow: hidden;和子width: 100% !important;

同时注意到，孩子不必是父母的直接子女，因此无法工作。为了记录，我的父元素是一个带有flex-basis: 66%;的Flex容器，它转换为Flexbox概念中的相对宽度。

Answer 2

将以下CSS应用于父div：

overflow: hidden;

或者您可能想在child-div上尝试CSS max-width属性。

Answer 3

您可以在子div上使用 width：100％！important 。这意味着它只会填充父div空间。

或者您也可以选择 max-width 和 min-width 概念。