[Murota]

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

 

### 発生している問題

度々申し訳ありません。

仕様なのか、いまいち分からないのですが、不思議な挙動があったのでご報告します。

 

• レスポンシブグリッド
  • スタック
    • ボタン（親）
      • ボタン（子）
      • ボタン（子）
      • ボタン（子）

 

上記の構造にして、ボタンブロック（親）の方向を「縦」、ボタンブロック（子）の設定を「100％」にすると、スタックブロックからボタンがはみ出るような表示になります。

レスポンシブグリッドを、サイドバーブロックや、フレックスブロックにした時も同様の現象が起きました。

 

ボタンブロックの方向を横にすれば解決するので、特段困っているわけではありません。

一応ご報告させていただきました。

♥ 0

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

[inc2734]

いずれもフレックスボックスで、ボタンの方向を変えるのは flex-direction で軸を変えるということになるので、その辺りでフレックスボックス関連のプロパティが干渉するのだろうなという気がします。

調査します！

♥ 0

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

[inc2734]

入れ子にしないと発生しないのでよくはわからなかったのですが、どうも CSS の仕様っちゃ仕様なのかな？という感じでした。

これ折り返しが有効になっているときだけ発生するみたいなんですけど、折り返しは CSS 的には flex-wrap: wrap で、横並びのときは縦に折り返すけど、縦並びのときは横に折り返す、ということになるから、条件が重なると折り返しちゃって横にはみ出す、みたいな感じみたいでした。

なので、縦並びになっているときは強制的に flex-wrap: nowrap !important になるように修正してみました。v18.5.0 にアップデートして確認してみてください！

♥ 0

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

[Murota]

ご対応ありがとうございました！

修正、確認できました。

 

ブロックの入れ子構造は無限にあるので、対応大変ですね…笑

本当にいつもありがとうございます。

また何かありましたらご報告させていただきます！

♥ 1

いいねをした人：

[投稿者]

投稿