html - CSS 布局 : one item overlaps the other and reaches the border of the container

Question

发现自己我无法弄清楚:

Demo link

CSS

.container {
  width: 50%;
  border: 1px solid #000;
  position: relative;
}
.container .small {
  width: 40%;
  background-color: tomato;
  position: absolute;
  left: 30px;
  height: 250px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.container .big {
  width: 60%;
  background-color: aquamarine;
  margin-left: auto;
}
.container > div {
  height: 300px;
}

HTML

<div class="container">
  <div class="small"></div>
  <div class="big"></div>
</div>

问题: 如何以某种方式修改布局，使 red box 到达容器的黑色边框并仍然与 blue box 重叠。

请注意:

蓝色框的内容可以有不同的高度，蓝色框的高度需要根据红色框的高度而变化(我可以使用 JS 处理)。但是，如果有另一种使用 flexbox 的方法，我们会很高兴听到

浏览器支持是 IE11+、FF36+、Chrome 36+、Android 4.2+、iOS 8+，因此您几乎可以使用任何您喜欢的 CSS 功能。

Answer 1

您是否尝试过将 left 属性设置为零并增加小 div 的宽度。

.container .small {
    width: 45%;
    background-color: tomato;
    position: absolute;
    left: 0px;
    height: 250px;
    top: 0;
    bottom: 0;
    margin: auto;
}

http://codepen.io/anon/pen/gpYwyK

根据您的描述和提供的代码，这具有预期的效果。