親要素のサイズより子要素が大きくならない

Question

##現象
画像サイズそのままで親要素のliからはみ出させ、はみ出た部分は非表示というふうにしたいです。
下記ソースでPCではうまく動くのですが、スマホだと画像サイズが親要素より大きくなりません。
原因わかる方教えてください。

sample.html

<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 中略 -->
<li>
  <img src="hoge.svg" alt="">
</li>

sample.scss
※スマホ版ではpx部をvwで置き換えて記載。

li {
  position: relative;
  width: 9px;
  overflow: hidden;
  img {
    position: absolute;
    top: 0;
    width: 15px;
  }
}

###追記
このソースにはもちろん他にもかなりの要素があり、その要素に対しては指定したとおりのpx、vwできちんと表示されています。

####環境
Mac OS
chrome/safari (スマホ版はブラウザの開発ツールで確認)

Answer 1

情報が少なすぎるので予測ですが、VW指定でミスってると思われます。
VWで指定する場合にはviewpoｒｔの指定などが絡んできます。
そのへん調べてみて下さい。

Comments

[退会済みユーザー]

html側に`<meta name="viewport" content="width=device-width,initial-scale=1">`の記載を入れていますし、ここに記載した以外の要素に対してはきちんとvwで幅を指定できています。

[shaak]

そうですか。
同じソースをCodepenなどで試しても問題なく動作してるので、
他の場所に問題がありそうですね。
VWを指定されているとの事ですが、それがいくつなのかも書かれていませんし
実際のソースを問題ない程度に削って、もう少し情報量を増やしてくれないと検証のしようがありませんです。