質問: いつもお世話になっております。 ### 前提・実現したいこと 現在スマートフォンサイトを制作しております。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/470f5bc6af81037e84633372b25bd137.png) 添付イメージのような、右矢印の見出しが付いたbox内に、 可変のボタンを2つ並べたいです。 下記ソースコードになります。 ### 該当のソースコード ``` .box{ border:1px solid } span{ display:block; } .inner_left { display: inline-block; background: #ccc; position: relative; font-size: 16px; font-weight: bold; text-align: center; padding: 8px 0 8px 6px; } .inner_left::after { content: ""; display: inline-block; border: 32px solid transparent; border-left-color: #ccc; position: absolute; left: 100%; top: 0%; } .inner_right { display: inline-block; margin-left: 30px; vertical-align: top; width: 55%; } .btn { color: #333; padding: 16px; margin: 4px; background-color: #498ed2; color: #fff; text-align: center; width: 28%; display: inline-block; } ``` ``` テキストテキストテキストテキスト ボタン ボタン ``` ### 発生している問題 上記のソースコードですと、画面を縮小した時には 思っているような動作なのですが、 画面が拡大した際にボタンの拡大が足りず、 一番外枠の右側が相当余ってしまう状態です。 添付イメージのように、 ボタンが横いっぱいになるようにしたく、ご教授いただければと思います。
回答: display:flex;(フレキシブルボックスレイアウトモジュール)を使えば簡単に実装できると思われます。 ``` .box { display:flex; } .inner_left { width: ●px; /*必要な固定幅*/ } .inner_right { flex-grow: 1; /*親要素に対して残りいっぱいまで広げる*/ display:flex; /*このボックスを起点として再度フレックスボックスを作る*/ justify-content: space-around; /*子アイテムを均等配置*/ } .inner_right .btn { width: 49%;/*ボタン幅適宜調整してください*/ flex-grow: 1; /*親ボックスに対していっぱいまで広げる*/ } ※レイアウトに関連する部分の抜粋のみ ``` 現在のHTML構造を変えずにやるなら大体こんな感じかと。 (※実際に試してはいないので細かい所の調整までは考えていません) フレックスボックスの詳細はGoogle先生に聞いてください。 ◎参考サイト