Dynamic div并排

Question

这是一种可能性，我问一个重复的问题。我搜索了所有内容，没有接近我的问题，也没有找到任何有用的答案。我在CSS世界相对较新，所以任何帮助，将不胜感激。

我有一个容器内有两个div，我想并排放置。在第二个div里面，我放置了一个不固定的图标。如果满足某些条件，则该图标将隐藏。另一个要求是，当窗口缩小时，我希望这两个元素都能显示并最好缩小div1，并使图标保持原样并具有相同的大小，以便两者都可见。

<div class="main-container"> 
      <div class="div1"></div> 
      <div class="div2"></div> 
</div> 

下面的CSS为我工作，并满足我所有的要求，但由于flex而无法在IE10上工作。

.main-container 
{ 
    display: flex; 
} 

.div1 
{ 
    position: relative; 
    border: 1px solid <#=styles["subduedBorderColor"]#>; 
    background-color: <#=styles["controlBackgroundColor"]#>; 
    height: 24px; 
    padding: 3px; 
    margin: 6px 2px 0 16px; 
    width: 100%; 
} 

我在这里尝试了另一种方法，但div1有一个固定的大小，当图标不存在时看起来很糟糕。我不希望div1在没有图标的情况下占用整个空间。

.main-container 
{ 
    white-space: nowrap; 
    width: 100% 
} 

.div1 
{ 
    position: relative; 
    border: 1px solid <#=styles["subduedBorderColor"]#>; 
    background-color: <#=styles["controlBackgroundColor"]#>; 
    height: 24px; 
    padding: 3px; 
    margin: 6px 2px 0 16px; 
    width: 85%; /* fallback if needed */ 
    width: calc((100%) - 50px); 
    display: inline-block; 
} 

.div2 
{ 
    display: inline-block; 
} 

我从昨天开始就在挣扎，真的很感谢这方面的帮助。

Answer 1

以下CSS为我工作的IE10，看到我添加了IE10的回退。我知道这对老年人IE不适用，但只要它适用于IE10 +，Chrome和Firefox，我就可以。

.div1 
{ 
    position: relative; 
    border: 1px solid <#=styles["subduedBorderColor"]#>; 
    background-color: <#=styles["controlBackgroundColor"]#>; 
    height: 24px; 
    padding: 3px; 
    margin: 6px 2px 0 16px; 
    -ms-flex: auto; /* IE 10 */ 
    flex: auto; 
} 

.main-container 
{ 
    display: -ms-flexbox; /* IE 10 */ 
    display: flex; 
} 

Answer 2

尽量给容器则相对位置给出一个绝对位置内的两个DIV看到JSFIDLE

.main-container { 
    width: 100%; 
    min-height: 100vh; 
    position: relative; 
} 

.div2 { 
    position: absolute; 
    left: 50%; 
    background: blue; 
    min-height: 100vh; 
    width: 50%; 
} 

.div1 { 
    position: absolute; 
    left: 0; 
    background: red; 
    min-height: 100vh; 
    width: 50%; 
}