(html css) max-widthが効かない！

前提・実現したいこと

input-pledgeでmax-width: 550px;にしたいのですが、反映されません。

該当のソースコード

(HTML)

<div class="info"> <label for="ins0"> ■保険加入状況 </label> <div class="format format-flex"> <div> <div> <label for="ins1"> ・健康保険 </label> <div class="format"> <input type="radio" class="bunrui" name="emp" required　value="有">有 <input type="radio" class="bunrui" name="emp" required　value="無">無 </div> </div> </div> <div> <label for="pledge"> 未加入の場合の誓約 </label> <div class="format"> <input type="text" required class="inputsome input-pledge" name="seiyaku1"> </div> </div> </div>

(CSS)
.info {
margin-bottom: 40px;
}

.format {
margin-top: 10px;
}

.format-flex {
display: flex;
margin-top: 10px;
}

.inputsome {
box-sizing: border-box;
height: 32px;
background: #ffffff;
border: 1px solid #708090;
border-radius: 4px;
padding: 0 10px;
margin: 0 0 0 10px;
font-size: 16px;
color: #333333;
letter-spacing: .1em;
margin-bottom: 5px;
margin-right: 5px;
}

.input-pledge {
width: 100%;
max-width: 550px;
}

補足

divを横並びにしたところ、右側のdivのinputのmax-widthが効かなくなりました。
max-widthを反映させるにはどのようにすればよろしいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

divを横並びにしたところ、右側のdivのinputのmax-widthが効かなくなりました。

display: flex;で子要素を横並びにすると、子要素の幅はデフォルトでは広がりません。そのため、その孫要素のテキストボックスの幅もmax-widthより小さくなるので、max-widthは無意味になります。

flex-grow flex-shrink flex-basis でフレックスアイテムの幅の拡縮、基準幅を設定するようにします。

具体的には、
まず、HTMLで下記のようにフレックスアイテムのdivにクラスを追加します。

html
1  <div class="format format-flex">
2    <div>
3
4    <!-- 略 -->
5    
6    </div>
7    <div class="pledge-wrapper"> <!-- クラスを追加 -->
8      <label for="pledge">
9        未加入の場合の誓約
10      </label>
11      <div class="format">
12        <input type="text" id="pledge" required class="inputsome input-pledge" name="seiyaku1">
13      </div>
14    </div>
15  </div>

追加したクラスに対して flex-grow flex-shrink flex-basis を設定します。

css
1.input-pledge {
2/* width: 100%;       削除 */
3/* max-width: 550px;  削除 */
4  width: calc(100% - 10px); /* 追加 */
5}
6
7/* 以下追加 */
8.pledge-wrapper {
9  flex-grow: 0;
10  flex-shrink: 1;
11  flex-basis: 550px;
12}