make text hidden and ellipsis

Question

I want to make the child2 and child3 text hidden with ellipsis when the decrease the window size, but I am not able to. How can I achieve this goal? I have already added white-space: nowrap, overflow: hidden and text-overflow: ellipsis. What else did I miss here?

<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/