Here's the scenario:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
border: 1px solid black;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
flex: 1 1 33.33333%;
white-space: nowrap;
max-width: 33.33333%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long ass text here</button>
</div>
</div>
</body>
</html>
The buttons are the same size but the problem is that they don't scale in size according to the flex item with longest content. Instead, the text of the last button here overflows. This is how it looks like:
And this is how I want it to look like:
So in short, I want 3 flex buttons with same width and height where the width should be determined according to button with the longest content. Also, I'd rather do this with CSS only (if it's possible).
EDIT: Because there seems to be some misunderstandings, I would like to clarify that the width should change dynamically and thus work with any texts given for the buttons, not just with the ones shown above. In other words, you can't just add e.g. width: 10rem for flex-item directly because it only works in specific situation.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
