widthのpx指定が反映されない

Question

コードを使い回ししているのですが、下記キャプチャのように
QマークとAマークの幅が異なってしまいます。

【HTML】

<div id="faq_list">
                    <div class="faq">
                        <div class="flex">
                            <span class="faq_mark">
                                Q
                            </span>
                            <p class="question">
                                最低限準備しておかないといけない調理器具、調味料はありますか。
                            </p>
                        </div>
                        <div class="flex">
                            <span class="faq_mark">
                                A
                            </span>
                            <p class="answer">
                                以下を準備ください。また、調味料についてはあればあるほど調理の幅が広がります。 <br>●調理器具：<br>なべ、フライパン、包丁、まな板、ボウル、ざる、菜箸、お玉、作り置きの保存容器やお皿、ラップ <br>●調味料：<br>食用油、塩、こしょう、砂糖、しょうゆ、みりん、みそ、酢
                            </p>
                        </div>
                    </div>
                    <div class="faq">
                        <div class="flex">
                            <span class="faq_mark">
                                Q
                            </span>
                            <p class="question">
                                調理器具が破損した場合はどういった対応をしていただけるのでしょうか。
                            </p>
                        </div>

                        <div class="flex">
                            <span class="faq_mark">
                                A
                            </span>
                            <p class="answer">
                                損害保険に加入しておりますので、破損した調理器具分を保険範囲内で弁償をさせていただきます。
                            </p>
                        </div>
                    </div>
                    <div class="faq">
                        <div class="flex">
                            <span class="faq_mark">
                                Q
                            </span>
                            <p class="question">
                                訪問不可な条件はありますか。
                            </p>
                        </div>
                        <div class="flex">
                            <span class="faq_mark">
                                A
                            </span>
                            <p class="answer">
                                以下の場合、調理をお断りさせていただきます。<br>・調理場やシンクが物であふれている<br>・お客様が泥酔されている、感染症を患っている
                            </p>
                        </div>
                    </div>
                    <div class="faq">
                        <div class="flex">
                            <span class="faq_mark">
                                Q
                            </span>
                            <p class="question">
                                料理人に直接価格交渉することは可能でしょうか。
                            </p>
                        </div>
                        <div class="flex">
                            <span class="faq_mark">
                                A
                            </span>
                            <p class="answer">
                                不可です。掲載された価格でのご対応となります。
                            </p>
                        </div>
                    </div>
                </div>

---

【CSS】

#faq_list {
    background: #ffffff;
    padding: 10px 0;
    .faq {
        padding: 8px 3%;
        box-sizing: border-box;
        .faq_mark,
        .question,
        .answer {
            display: block;
        }
        .faq_mark {
            background: #8bc34a;
            color: #ffffff;
            line-height: 30px;
            width: 30px;
            height: 30px;
            text-align: center;
            border-radius: 50%;
            @include fontsize(15);
        }
        .question,
        .answer {
            @include fontsize(12);
            padding-left: 2%;
            p {
                line-height: 30px;
            }
        }
        .question {
            font-weight: 700;
        }
    }
}

Answer 1

提示のコードにはないですが、

.flex {
  display: flex;
}

でQAマークとテキストを横並びにしていると推測。
もしそうなら、flex-shrink: 0;を設定して縮まないようにすればいいでしょう。

        .faq_mark {
            background: #8bc34a;
            color: #ffffff;
            line-height: 30px;
            width: 30px;
            height: 30px;
            text-align: center;
            border-radius: 50%;
            font-size: 15px;
            flex-shrink: 0; /* 追加 */
        }

Comments

[ebiko]

初めて知ったプロパティでした。上二つのQ&Aだけが縮んでいるのはpタグの幅が広くて全体の幅を超えてしまった、ということで認識しました。ありがとうございました。

Answer 2

.faq_markにflex: none;を追加するといかがでしょうか。