I can’t find any solution to have 2 same size divs that will fit text inside it in one line. Looks like white-space: nowrap width is not taken into consideration after I set on parent width: fit-content.
They should be as small as possible, always same size, no wrapping text to second line.
div {
display: flex;
width: fit-content;
}
.button {
padding: 10px 20px;
flex: 1;
white-space: nowrap;
min-width: 130px;
width: fit-content;
}
.button1 {
background: red;
}
.button2 {
background: green;
}
<div>
<div class="button button1">Short Text</div>
<div class="button button2">A Long Text Button That Has Greater Width </div>
</div>
3
Answers
can be done with CSS grid:
Solution # 1 (with flex)
Use
flex-basis
.More information – Stack Overflow Answer
Solution # 2 (with flex and javascript)
Use JavaScript to set children’s width to width of longest element.