boxsizing: borderbox;のついた親要素とその子要素について

Question

box-sizing: border-box;と設定されてるwidth1100の親要素のpaddingが子要素から抜けて親要素のcontentと同じ幅になっていました

僕は子要素も幅1100になると思っていたのですが違ったので親要素がborder-box設定されていても子要素は親要素のcontent幅だけを引き継ぐのかな？と思いましたがこれで合っているでしょうか？

コード  <div class="news-contents wrapper">
    <article>
      <header class="post-info">
        <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
        <p class="post-date">3/30 <span>2019</span><p/>
        <p class="post-cat">カテゴリー：お店の紹介</p>
      </header>
      <img src="images/wall.jpg" alt="店内の様子">
      <p>
        体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
        おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
        体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
        おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
      </p>
      <p>
        体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
        おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
        体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
        体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
        おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
      </p>
      <p>
        体に優しい自然食を提供する、WCB CAFE。
      </p>
  </article>

    <aside>
      サイドバー部分
    </aside>
  </div>

コード.wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
article{
  width: 74%;
}
aside{
  width: 22%;
}
.news-contents{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;

どこをコードを載せればいいか迷いましたが
一応質問に関係ありそうなコードを載せてみました

Comments

[miyabi_pudding]

そのように設定しているHTMLとCSSを記載いただけませんか？
文章だけでは伝わりにくいです。

[miyabi_pudding]

修正ありがとうございます。

> box-sizing: border-box;
どこにそんな記述ありますか？
また、CSSの文法めちゃくちゃなので、
直しましょう。
}が足りない箇所が二箇所ほどあります。

Answer 1

僕は子要素も幅1100になると思っていたのですが違ったので親要素がborder-box設定されていても子要素は親要素のcontent幅だけを引き継ぐのかな？と思いましたがこれで合っているでしょうか？

box-sizingプロパティは設定してある要素のサイズをどのように計算するかを指定するものです。
親要素のbox-sizingプロパティの設定に関わらず、子要素のサイズは、相対値で指定した場合、親要素のコンテンツ幅が基準になります。

box-sizing - CSS: カスケーディングスタイルシート | MDN

例
親要素に下記のように指定した場合

  width: 1100px;
  padding: 50px;
  box-sizing: border-box;

親要素の全体の幅 1100px
コンテンツ領域の幅　1000px

下記のように指定した場合は、

  width: 1100px;
  padding: 50px;
  box-sizing: content-box; /* 既定値 */

親要素の全体の幅 1200px
コンテンツ領域の幅　1100px

となります。
子要素に width:100%; と設定したら、前者、後者ともに親のコンテンツ領域の幅になります。

CodePenサンプル