flexでpxのボックスと%のボックスを並べた時にpxの領域を守りたい

Question

いつもお世話になっております。
タイトルがわかりずらく申し訳ありません。

<div class="flex_box">
    <div class="s_contents">

    </div>
    <div class="l_contents">

    </div>
  </div>

.flex_box{
      display: flex;
      }

      .s_contents{
      width: 200px;
      height: 500px;
      background-color: yellow;
      }

      .l_contents{
      width: 100%;
      background: #ccc;
      }

この場合にs_contentsのwidthを200px固定で表示したいのですが、200pxになりません。 170px程度になり、ウィンドウの幅で微妙に可変します。

l_contentsのwidthを80%などにすれば指定したpxになるのですが意味がわからずモヤモヤします。

そこで質問がさせて下さい。

１：なぜ指定したｐｘにならないのか

２：指定したｐｘとwidth100%を共存させる為にはどうすればいいのか。

未熟で申し訳ありませんが、ご教授のほど宜しくお願いいたします。

Answer 1

width100% という部分について、「.s_contents」の右一杯に「.l_contents」という意味なのか、「.s_contents」の下一杯に「.l_contents」という意味なのかによって回答が少し変わります。

右一杯 （サンプル：https://jsfiddle.net/v2fnacer/）

.flex_box {
	display: -webkit-flex; /* Safari */
	display:         flex;
}
	.s_contents {
		background-color: yellow;
		height: 500px;
		width: 200px;
	}

	.l_contents {
		background: #ccc;
		flex-grow:1;
	}
```下一杯 （[サンプル：https://jsfiddle.net/v2fnacer/1/](https://jsfiddle.net/v2fnacer/1/)）

.flex_box {
display: -webkit-flex; /* Safari /
display: flex;
-webkit-flex-wrap: wrap; / Safari */
flex-wrap: wrap;
}
.s_contents {
background-color: yellow;
height: 500px;
width: 200px;
}

.l_contents {
	background: #ccc;
	height: 100px;
	width: 100%;
}

Comments

[LanHma]

まさにこの方法でした。ありがとうございます！

Answer 2

詳しくは株式会社LIG様のHPで説明してありますが

.flex_box {
    display: flex;

    .s_contents {
        -webkit-flex-basis: 200px;
        flex-basis: 200px;
        height: 500px;
        background-color: yellow;
    }

    .l_contents {
        -webkit-flex-basis: auto;
        flex-basis: auto;
        background: #ccc;
    }

}

で解決すると思います。

Comments

[kei344]

いくつか指摘があります。
1. .flex_box が適切に閉じられていない
　多分Sass記法ですが、質問者はSassを使っていないように見受けられます。
2. 「株式会社LIG様」と書きつつ「coliss.com」を参照している
3. Sass に絡む事だと思うのですが、書かれたコードでは.l_contentsがwidth height がともに0になって表示されませんでした。
ご確認ください。