html - 如何让底部的两个盒子以移动尺寸相互堆叠？

Question

我尝试使用不同的 flex 属性，包括 flex-grow/shrink/basis/wrap 和媒体查询，但是当屏幕变小（例如：678px）时我无法堆叠下面的最后一个框，我不确定我是什么我做错了。我只想使用 flexbox 而不是 grid、float 等来完成这个。我正在尝试完全了解如何使用 flexbox，因此非常感谢任何帮助。

HTML

<div class="container">
    <div class="container-top"></div>
    <div class="container-bottom">
      <div class="inner-container subscription">
      <div class="inner-container reasons">
    </div>

CSS

body {
  box-sizing: border-box;
  font-family: 'Karla', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e6eff6;
  position: relative;
}

.container {
  display: flex;
  flex-direction: column;
  /* flex-basis refers to height here since body's (parent) flex-direction is column. */
  flex: 0 0 430px;
  max-width: 600px;
  box-shadow: 0 2px 10px #c3ced6;
  border-radius: 6px;
  overflow: hidden;
  margin: 2rem;
}

.container-top {
  height: 40%;
  background-color: #fff;
  padding: 2rem 2rem 0;
  display: flex;
  flex-direction: column;
}

.container-bottom {
  display: flex;
  height: 60%;
  /* flex-wrap: wrap; */
}

.inner-container {
  padding: 2rem 2.5rem;
}

.inner-container.subscription {
  background-color: #2bb3b1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.inner-container.reasons {
  background-color: #4abebd;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

标签： htmlcss

Answer 1

删除此查询

@media (max-width: 680px) {
  .container {
     flex-direction:row;
  }
 }

删除display:flex_ container-bottom

.container-bottom {
       height: 60%;
  }

添加1到弹性值

.container {
   display: flex;
   flex-direction: column;
   flex: 1 0 430px; #adding 1 to flex
   max-width: 600px;
   box-shadow: 0 2px 10px #c3ced6;
   border-radius: 6px;
   overflow: hidden;
   margin: 2rem;

}

或删除flex并添加height到容器

.container {
    display: flex;
    flex-direction: column;
    height : 600px;
    max-width: 600px;
    box-shadow: 0 2px 10px #c3ced6;
    border-radius: 6px;
    overflow: hidden;
    margin: 2rem;
}

两者都会导致