Change the width of a popup based on a specific container

Question

I have a popup with two containers:

• text container
• container button

The pop-up window has a width of 370 pixels and buttons are displayed below the text.

The width of the popup can only be changed if the buttons have long text that causes the width of the popup to increase (the buttons should always appear on the same line).

If there is long text in the text container, the width of the pop-up should remain 370px.

For instance:

• The width of the popup is 383 pixels due to the long text in the buttons:

• The width of the pop-up window is 370 pixels (the button text can be displayed in 370 pixels):

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 rendering trick so that the text does not extend the parent element by setting the width of the child element to 0 . Then just set min-width: 100% to ensure 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%; } 

Answer 3

For text, it is expected that .popup grows with text because it is an inline-block element, therefore width: 100%; does not behave as you would like. Since your 370px value 370px hardcoded, I see no problem reusing it in your ruleset for .text-container as part of the max-width rule. Although your screenshots have a padding: 30px; rule padding: 30px; , so if you use box-sizing: border-box , use the .popup add- .popup by making .text-container max-width 310px , which is width - padding on each side.

For buttons, use white-space: nowrap; on .buttons-container to keep your buttons on the same line, although the aforementioned .popup inline-block behavior should take care of this on its own.

 .popup { display: inline-block; position: relative; border: 1px solid; min-width: 370px; } .text-container { max-width: 370px; /* Compensate for the padding if using box-sizing: border-box */ } .buttons-container { white-space: nowrap; } 

 <div class="popup"> <div class="text-container">some text that is also white long but that goes to the next line when it reaches a certain width</div> <div class="buttons-container"> <button>Button 1 with longer text</button> <button>Button 2 with some text as well</button> </div> </div>