有没有办法阻止特定的 div 容器在网页响应时溢出？

Question

我有一个带有 class(.section2) 的 parent 元素，它有两个带有 [=23= 的 div 容器] (.menu-box1 ) 就是它的children，我用的是display: flex;和一个 flex-direction: 列；并且那两个 div 容器有一个 child 容器带有 class (.menu) 集。但是这个容器溢出到它们的 parent 元素 (section3).

的下一个兄弟节点

Answer 1

删除任何固定的 height/width 如果你给。

使用 flexbox，内容将仅在父级内。

.section2{
  background-color:red;
  display: flex; 
  flex-direction: column;
  padding:15px
}

.menu-box1{
  background-color:yellow;
}

.menu{
  background-color:green;
}

.section3{
  position:relative;
  background-color:blue;
  height:200px;
  width:200px;
}

<div class="section2">
  <div class="menu-box1">
    <div class="menu">
      i am menu
    </div>
  </div>
  <div class="menu-box1">
    <div class="menu">
      random long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text 
    </div>
  </div>
</div>

<div class="section3">
  I am section 3.
</div>

有没有办法阻止特定的 div 容器在网页响应时溢出？

Is there a way to stop a particular div container from overflowing when the webpage is responsive?

html

css

height