将绝对定位的子对齐到过度隐藏的相对父级

Question

我有这段代码：

<div id="main_wrapper" style="width: 80vw; overflow: hidden;">
     <div id="inner_wrapper" style="position: relative;">
         <div id="red" style="background-color: red;width: 20vw;height: 100px;position: absolute;left: 80vw;"></div> 

         <div id="blue" style="background-color:blue; height:100px; margin: 0px 1% 0px 1%;"></div> 
     </div> 
 </div> 

这是js-fiddle：https://jsfiddle.net/omriman12/msrpwnym/1/

基本上main_wrapper过度隐藏的inner_wrapper，我想要做的是将red与blue元素的右侧对齐。

我的问题是当我使用亲戚时red被过度隐藏。

我必须保持相对！这是问题的一部分，不要改变结构！

以下是我实际试图创建的内容：

Answer 1

试试这个。问题是您将#main_wrapper设置为width: 80vw和overflow-x: hidden。这导致任何孩子将被隐藏，如果这些孩子宽于 80vw 。您必须将#main_wrapper扩展为 100vw ，并使用 80vw 设置宽度#inner_wrapper以显示#main_wrapper的子项。

顺便说一下，当您点击每一行时，您需要动态调整#main_wrapper的宽度，如下面的代码段所示。

＆＃13;

＆＃13;

$('.row').click(function() {
  $(this).toggleClass('selected');
  if($(this).hasClass('selected')) {
    $('#main_wrapper').width('100vw');
  } else {
    $('#main_wrapper').width('80vw');
  }
});

＆＃13;

#main_wrapper{
  width: 80vw;
  overflow-y: scroll;
  overflow-x:hidden;
}

#inner_wrapper{
  position: relative;
  width: 80vw;
}

#blue{
  background-color:blue; 
  height:100px; 
  margin: 0px 1% 0px 1%;
}

#red{
  background-color: red;
  width: 20vw;
  height: 100px;
  position: absolute;
  left: 80vw;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main_wrapper">
  <div id="inner_wrapper" class="row">
    <div id="red" ></div> 
    <div id="blue"></div> 
  </div> 
</div>

＆＃13;

＆＃13;

＆＃13;