隐藏文字和省略号

Question

当缩小窗口大小时，我想用省略号隐藏child2和child3文本，但是我不能。我怎样才能实现这个目标？我已经添加了空格：nowrap，overflow：隐藏和text-overflow：省略号。我在这里还想念什么？

<div class="container">
    <div class="left_container">
        <div class="child1">Some Text aaaaaaaaaa</div>
        <div class="left_bottom_container">
            <div class="child2">Some Text bbbbbbbbb</div>
            <div class="child3">Some Text ccccccccc</div>
        </div>  
    </div>  
    <div class="right_container"></div>
</div>

.container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;    
}

.left_container{
    display: flex;
    flex-direction: column;    
    flex-grow: 3;
}

.left_bottom_container{
    display: flex;  
    margin-top: auto;
  overflow: hidden
}

.child2{
  white-space: nowrap;
  overflow: hidden
  text-overflow: ellipsis;
    max-width: 200px;
    height: 20px;
    margin-bottom: 15px;
}

.child3{
  white-space: nowrap;
  overflow: hidden
  text-overflow: ellipsis;
    margin-left: 10px;
    max-width: 200px;
    height: 20px;
    margin-bottom: 15px;
}

.right_container{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
    align-items: flex-end;
}

https://jsfiddle.net/k0ec6onb/