calc の指定が効いていないようなのですが原因がわかりません

試しに lesson10 ～ 16 の学習を一つにまとめてみたのですが、どうも .desc に設定した

.desc{
  width: calc(100% -150px -32px);
}

が効いていないようです。
理由が分からないのでご教授願えればと思います。

【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <!-- <div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
  </div> -->

  <header>
    <img src="img/logo.png" width="64" height="64">
    <nav>
      <ul>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
      </ul>
    </nav>
  </header>
  <div class="container">
    <main>
      <section>
        <div class="pic">
          <img src="img/logo.png" alt="">
        </div>
        <div class="desc">
          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        </div>
      </section>
      <section>
        <div class="pic">
          <img src="img/logo.png" alt="">
        </div>
        <div class="desc">
          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        </div>
      </section>
      <section>
        <div class="pic">
          <img src="img/logo.png" alt="">
        </div>
        <div class="desc">
          <p>こんにちは。こんにちは。</p>
        </div>
      </section>
      <section>
        <div class="pic">
          <img src="img/logo.png" alt="">
        </div>
        <div class="desc">
          <p>こんにちは。</p>
        </div>
      </section>
    </main>
    <nav>Nav</nav>
    <aside>Aside</aside>   
  </div>
  <footer>Footer</footer> 

</body>
</html>

【styles.css】
html{
  height: 100%;
}
body{
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
header{
  display: flex;
}
header nav{
  margin-left: auto;
}
nav ul{
 list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
nav a{
  display: block;
  width: 100px;
  text-align: center;
  line-height: 64px;
}
nav a:hover{
  background:#eee;
}
.container{
  display: flex;
  flex: 1;
}
main{
  background: skyblue;
}
section{
  display: flex;
  margin-bottom: 60px;
  justify-content: space-between;
}
section:nth-child(even){
  flex-direction: row-reverse;
}
.pic{
  width: 180px;
  /* margin-right: 32px; */
}
.desc{
  /* flex: 1; */
  width: calc(100% -180px -32px);
  background: #ccc;
}
.container nav{
  background: tomato;
  width: 100px;
  order: -1;
}
aside{
  background: orange;
  width: 100px;
}
footer{
  background: silver;
}

ドットインストール - 3分動画でマスターできるプログラミング学習サービス

関連する質問と回答

このレッスンの質問と回答 (16)

サービスメニュー

ご利用にあたって

ソーシャルメディア

更新情報