希望弹性框按钮在里面的文本太长时占用换行符

Question

我的页面中有 2 个弹性框按钮，当我国际化并更改为德语时，按钮很长，文本在按钮内形成两行。但是我希望按钮在文本较长时占据整个宽度，第二个按钮填充第二行。我该怎么做？

https://codepen.io/sahanaravi/pen/NWKdxee

<h3>2 buttons in a line</h3>
<div class="button-area-line">
<a href="#">Button one with a lot more text than others mbjbjb jhgjhgjhg lkjlkjkj</a>
<a href="#">Button two info jhgjhgjgh </a>
</div>
<h3>2 buttons in a line</h3>
<h3>Want this to wrap and become single button in a line instead of text taking but 2 lines inside the button</h3>
<div class="button-area-line">
<a href="#">Button one with a lot more text than others mbjbjb jhgjhgjhg lkjlkjkj Button one with a lot more text than others mbjbjb jhgjhgjhg lkjlkjkj</a>
<a href="#">Button two info jhgjhgjgh kjhkjhkjhjhhkjkjhkjhkjhkj hgjhgjhgjhgjhg </a>
</div>

Answer 1

允许在父 flex 容器上换行并将链接设置为nowrap。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.button-area-line {
margin: 10px auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
justify-content: space-between;
}
.button-area-line a {
background: #999;
padding: 1em;
font-size: .9em;
margin: .3em;
color: white;
text-decoration: none;
flex-grow: 1;
text-align: center;
}
a {
white-space: nowrap;
}

<div class="button-area-line">
<a href="#">Button one with a lot more text than others mbjbjb jhgjhgjhg lkjlkjkj Button one with a lot more</a>
<a href="#">Button two info jhgjhgjgh kjhkjhkjhjhhkjkjhkjhkjhkj hgjhgjhgjhgjhg </a>
</div>