how do I limit the width of the child div to the width of the parent?

Question

I want to limit the width of the right div, and the internal content to not overflow and add ellipsis if needed. So far I have:

<div class="container">
    <div class="left" id="left">
        left Lorem Ipsum is simply dummy 
    </div>
    <div class="right">
      <div class="top">
         hello
      </div>
      <div class="bottom">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
      </div>
       
    </div>
</div>
<button onClick="showHide()">
show / hide
</button>

.container {
    display: flex;
    width: 400px;
}

.left {
    width: 180px;
    display: none;
}

.right {
    flex-grow: 1;
    
    display: flex;
    flex-direction: column;
        justify-content: space-between;
}
.top {
  width: 100%;
}
.bottom {
    overflow: hidden;
    text-overflow: ellipsis;
        white-space: nowrap;
    width: 100%;
}

/* just to highlight divs for example*/
.left { background-color: pink; }
.right { background-color: lightgreen;}

here's the fiddle: http://jsfiddle.net/4mcg2kjz/

The content on the right has constant width, but it may of may not be visible. When not visible, the left content should take up the entire space of the parent.

In this example, the parent (container) has a fixed width, but it can also vary. I suppose i will use max-width and min-width. But what i really need is the long left content to stop at the end of the parent container. How do I make this happen?