使用 flexbox 的底部对齐容器导致媒体屏幕出现问题

Question

我有以下... ...当外部绿色容器宽度低于 500px 时，我想堆叠蓝色容器（带有框 10 和 20），如下所示：我正在使用媒体屏幕来执行此操作，但 fiddle 显示堆叠无法正常工作并进入棕色容器。当允许蓝色容器使用相对位置位于绿色容器的顶部时，堆叠工作正常，但当我使用绝对位置将其定位在底部时，堆叠失败。谁能告诉我我做错了什么？

#TOTALcontainer {
  border: 1px solid green;
  position: absolute;
  margin: 5px;
}

#outerLHcontainer {
  position: relative;
  border: 1px solid brown;
  margin: 5px;
}

#LHcontainer {
  position: relative;
  border: 1px solid red;
  margin: 30px 0 30px 10px;
  margin-right: 12vw;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

#div1,
#div2,
#div3 {
  width: 250px;
  height: 10px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  float: left;
  clear: left;
  margin: 10px;
}

#RHcontainer {
  position: relative;
  border: 1px solid blue;
  margin: 5px;
  display: flex;
  bottom: 0;
  right: 0;
  float: right;
}

#div10,
#div20 {
  width: 60px;
  height: 10px;
  margin-right: 30px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

@media screen and (min-width: 500px) {
  #outerLHcontainer {
    width: 50%;
    float: left;
  }
}

<div id="TOTALcontainer">
      <div id="outerLHcontainer">
        <div id="LHcontainer">
          <div id="div1">1</div>
          <div id="div2">2</div>
          <div id="div3">3</div>
        </div>
      </div>
      <div id="RHcontainer">
        <div id="div10">10</div>
        <div id="div20">20</div>
      </div>
    </div>

http://jsfiddle.net/pb2gckL5/3/

Answer 1

你可能会采用另一种方式来做到这一点。简单地使用 flexbox:

<div class="container">
  <div class="left">
    the item of the left <br>left <br>left <br>left <br>left <br>left <br>left <br>left <br> 
  </div>
  <div class="right">
    <div class="right-block">
      blue block
    </div>
  </div>
</div>

.container {
  width: 100%;
  border: 1px solid red;
  display: flex;
  align-items: flex-end;
}
.left, .right {
  flex: 1 0 0;
  margin: 5px;
}
.left {
  border: 1px solid green;
}
.right {
  border: 1px solid blue;
}

@media screen and (max-width: 499px) {
  .container {
    flex-direction: column;
  }
  .left, .right {
    width: calc(100% - 10px);
  }
}

https://codepen.io/priatelko/pen/oNYoKga

使用 flexbox 的底部对齐容器导致媒体屏幕出现问题

Bottom aligned container using flexbox causing problem with media screen

css

media-queries

flexbox