Issue
The presence of block content such as buttons is causing my flex items to expand and overflow the container.
Desired Outcome
In this particular case, I want the buttons to remain adjacent to each other with the button text truncated using an ellipsis. The widths of the flex items should be determined by their siblings rather than the content itself, ensuring that they stay within the container and adjust responsively as the container's size changes or flex items are added or removed. It's important to note that in my specific situation, using overflow:hidden on the flex items or their parent div is not a viable solution.
You can view the sample code on this fiddle link.
https://i.sstatic.net/kYm78.png
Sample HTML
<div class="container" style="width: 400px;">
<div class="child one">
Child One
<br>Lorem ipsum
<br>dolor sit amet
</div>
<div class="child two"><div><button class="text">Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame</button><button>button two</button></div></div>
<div class="child three">Some Text</div></div>
Sample CSS
div {
border: 3px solid;
}
.container {
padding: 10px;
background-color: yellow;
display: -webkit-flex;
display: flex;
}
.child {
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: #eee;
}
.child.one {
color: green;
}
.child.two {
flex: 6 1 auto;
color: purple;
}
.child.two button {
display: inline-block;
}
.child.three {
color: blue;
}
.text {
text-overflow: ellipsis;
overflow: hidden;
}
UPDATE: Instead of displaying multiple buttons, I now only need to show one button. However, I would still appreciate it if someone could solve it with multiple buttons.