如何限制div的调整比例，使其不能大于父div

要限制div的调整比例，使其不能大于父div，可以使用CSS中的flexbox布局来实现。

首先，将父div设置为一个flex容器，可以通过设置父div的display属性为flex来实现：

.parent-div {
  display: flex;
}

然后，将子div设置为flex项，并使用flex属性来控制子div的比例。为了限制子div的调整比例，可以使用flex属性的值为0来固定子div的大小，同时使用flex属性的值为1来允许子div根据可用空间进行调整。这样，子div的调整比例将受到限制，不会超过父div的大小。

.child-div {
  flex: 1; /* 允许子div根据可用空间进行调整 */
  max-width: 100%; /* 限制子div的最大宽度为父div的宽度 */
}

完整的代码示例：

<div class="parent-div">
  <div class="child-div">子div 1</div>
  <div class="child-div">子div 2</div>
  <div class="child-div">子div 3</div>
</div>

.parent-div {
  display: flex;
}

.child-div {
  flex: 1;
  max-width: 100%;
}

这样，无论父div的大小如何变化，子div的调整比例都不会超过父div的大小。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云