当我从左到右缩小浏览器时，如何防止父容器中的项目消失？

Question

.firstcontent {
    display: flex;
    border : 1px solid black;
    padding-top: 80px;
    align-items: center;

}

.firstbox1 {
    border : 1px solid green; 
    width: 900px ;
    padding-left: 180px ;
}

.firstbox2 {
    border : 1px solid red;
    margin-bottom: 100px;
    margin-left: 80px;
    flex: 1 1 60em; 
}

#title {
    font-size: 60px;
    color: rgb(33,37,41); 
    font-weight: 500;
    margin: 0
}

#p1 {
    font-size: 20px; 
    color: rgb(72, 73, 75);
    font-weight: 400;
    line-height: 40px
}

#bootstrapimg {
    height: 250px;
}

<div class="firstcontent">

    <div class="firstbox1">
      <h1 id = "title">Build fast, responsive sites with Bootstrap</h1>
      <p id = "p1">Quickly design and customize repsonsive mobile-first sites with Boostrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful Javascript plugins.</p>

    </div>

    <div class="firstbox2">
     <img src="/bootstrap-clone/Images/kindpng_278320.png" alt="bootstrap" id="bootstrapimg">
    </div>

  </div>

当我从左到右缩小浏览器时，

右容器（第一个框 2 类）完全从屏幕上消失。

我怎样才能防止类 firstbox2 消失，而不是消失，当我的浏览器缩小时，我希望 firstbox 2 的徽标堆叠在 firstbox 1 的顶部。这是我的 HTML 和 CSS。谢谢！

Answer 1

请尝试以下小提琴： https://jsfiddle.net/asutosh/vuLoade3/20/

主要是 css 更改：

.firstcontent {
  display: flex;
  border: 1px solid black;
  padding-top: 80px;
  align-items: center;


}

.firstbox1 {
  border: 1px solid green;
  max-width: 900px;
  min-width: 0px;
  padding-left: 180px;
  flex-grow: 0;
  flex-shrink: 1;
  overflow: auto;
}

.firstbox2 {
  border: 1px solid red;
  margin-bottom: 100px;
  margin-left: 80px;
  max-width: 60px;
  flex-grow: 0;
  flex-shrink: 1;
}

#title {
  font-size: 60px;
  color: rgb(33, 37, 41);
  font-weight: 500;
  margin: 0px;
}

#p1 {
  font-size: 20px;
  color: rgb(72, 73, 75);
  font-weight: 400;
  line-height: 40px;

}

#bootstrapimg {
  height: 250px;
}

@media only screen and (max-width: 600px) {

  .firstcontent {
    display: flex;
    border: 1px solid black;
    padding-top: 80px;
    align-items: center;
    flex-wrap: wrap;

  }

  .firstbox1 {
    order: 2;
  }

  .firstbox2 {
    order: 1;
  }
}