[Murota]

【お使いの unitone のバージョン】15.8.2
【お使いのブラウザ】Chrome

 

### 発生している問題

 

いつもお世話になっております。

両端ブロック内に、ボタンを設置。

この場合に、ボタンの最小幅を設定しても、最小幅が反映されない現象が見られました。

お手数をおかけしますが、ご確認いただけますと幸いです。

♥ 0

いいねをした人： いません

[inc2734]

ご報告ありがとうございます。

ボタンブロックの min-width、例えばユーザーが 600px と入力したときに、素直に min-width: 600px に設定しちゃうとモバイルサイズのときに画面を突き抜けてしまうので、親の大きさは超えることがないように内部的に min-width: min(600px, 100%) となるようにしています。

両端ブロックは子要素を両端に寄せるために子要素を flex-basis: fit-content にして、子要素のサイズがなるべく中身にあわせて縮むようになっています。

今回はその2つの CSS が干渉して発生している現象のようです。内部的にスマートに解決する方法がちょっと思いつかないので、とりあえずボタンブロック（親）の「推奨幅」を fit-content 以外（例えばボタンブロック（子）に設定した最小幅と同じ値）を設定するとどうかなと思うのですが…。試してみてください！

♥ 0

いいねをした人： いません

[Murota]

ありがとうございます！
ご連絡いただいた方法で無事に実装できました！

なるほど…。ボタンブロック（親）にも推奨幅が用意されていたのですね。
すっかり見落としていました…。

ブロックの組み合わせは調整が大変かと思いますが、今後ともよろしくお願いします！

♥ 0

いいねをした人： いません

[inc2734]

なるほど…。ボタンブロック（親）にも推奨幅が用意されていたのですね。

具体的には、ボタンブロック（親）自体が持っているわけではなくて、「「両端ブロックの子ブロック」に「推奨幅」が追加される」という挙動になります。

ブロックの組み合わせは調整が大変かと思いますが、今後ともよろしくお願いします！

ありがとうございます。こちらこそ、よろしくおねがいします！

♥ 0

いいねをした人： いません

[投稿者]

投稿