White space: nowrap with flex: 1; child width is too small to accommodate text
P粉776412597
2023-09-04 13:30:47
<p>I can't find any solution to have 2 equally sized divs fit the text in one line. Looks like whitespace: after I set parent width:fit-content, width is not taken into account now. </p>
<p>They should be as small as possible, always the same size, and do not wrap the text to the second line. </p>
<p>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<div class="button button1">Short Text</div>
<div class="button button2">A Long Text Button That Has Greater Width </div>
</div></pre>
</p>
Can be done using CSS Grid: