Change popup width based on specific container

Question

I have a popup that has two containers:

1. text-container
2. buttons-container

The popup has width of 370px and the buttons appear below the text.

The width of the popup can be changed only in a case that there is long text in the buttons that cause the popup width to grow (the buttons should appear in one row always).

If there is a long text in the text container, the popup width should remain 370px.

For example:

1. The popup width is 383px because of long text in buttons:

2. The popup width is 370px (The buttons text can be displayed in 370px):

This is my jsbin:

http://jsbin.com/fuzozehipo/1/edit?html,css,output

HTML:

<div class="popup">
  <div class="text-container">some text</div>
  <div class="buttons-container">
    <button>Button 1 with long long long long long long text</button>
    <button>Button 2</button>
  </div>
</div>  

CSS:

.popup {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.text-container {
  width: 100%;
}

Any help appreciated!

Answer 1

You can use an interesting Flex rendering trick to make the text not expand the parent by setting the child's width to 0. Then just set min-width: 100% to ensure it takes up the full width of the parent container, which is now controlled only by the width of the buttons.

.popup {
  border: 1px solid;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  min-width: 370px;
  display: inline-flex;
  flex-direction: column;
}

.text {
  width: 0;
  min-width: 100%;
}

.buttons {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
}

button + button {
  margin-left: 10px;
}

<div class="popup">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at porta sapien. Quisque sapien justo, fringilla consectetur molestie eu, hendrerit vehicula purus. Pellentesque ac ante urna.
  </div>
  <div class="buttons">
    <button>Really long text that will make the buttons push out the parrent div</button>
    <button>text</button>
  </div>
</div>

Answer 2

Can you do something like

.wrapper {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.buttons-container {
  display: flex;
  flex-direction: row;
}

.buttons-container > button {
  flex: 1;
  white-space: nowrap;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buttons-container > button:first-child {
  margin-left: 0;
}

.text-container {
  width: 100%;
}