OSの違いによりビューが崩れてしまう

前提・実現したいこと

windowsでもビュー崩れせず、表示したい。

初めて質問させてもらいます。
MACを使い、チャットアプリを作成し、デブロイし、ビューが上手く表示できていることを確認しましたが、
家でwindowsを使い、チャットアプリを確認した所、ビューが崩れていました。

質問１、同じブラウザ、同じバージョンでもOSの違いにより、ビュー表示が変化することはあるのでしょうか？
質問２、また、何が原因でどのように変更すればビュー崩れを修正できるのでしょうか？

環境
アプリの作成、確認
MacOS：Catalina　　ブラウザ：Google Chrome　バージョン: 79.0.3945.117

ビュー崩れのｐｃ
windows10　　　　　ブラウザ：Google Chrome　バージョン: 79.0.3945.117

発生している問題・エラーメッセージ

成功例
https://gyazo.com/737cd5af639f0634fb0c35da681670e4

ダメな例
https://gyazo.com/90b1f75a8c04ff448091a5f123748398  
https://gyazo.com/0b70fa8ee995f8f958290be2d6f20efe
一応、サイトのurlも貼っときます
http://3.114.181.163/

該当のソースコード

index.html.haml

.wrapper
  = render "shared/side_bar"
  = render "main_chat"

_side_bar.html.haml

.side_bar
  .user
    .user__info
      %p.user__info__name
        = current_user.name
      %ul.user__info__btn
        %li.user__info__btn--gear
          =link_to edit_user_path(current_user), class: 'user__info__btn--gear--link' do
            = icon('fas', 'cog')
        %li.user__info__btn--edit
          =link_to new_group_path, class: 'user__info__btn--edit--link' do
            = icon('fas', 'edit')
        
  .index
    - current_user.groups.each do |group|
      =link_to group_messages_path(group),class: 'index__group' do
        .index__group__name
          = group.name
        %p.index__group__message
          = group.show_last_message

_main_chat.html.haml

.main_chat
  .current_group
    .current_group__left
      .current_group__left__name
        = @group.name
      .current_group__left__member
        - @group.users.each do |user|
          = user.name
    =link_to edit_group_path(@group),class:"current_group__btn" do
      Edit
  .log  
    = render @messages
  = form_for [@group, @message], html: { class: "form"} do |f|
    .form__box
      = f.text_field :text, class: "form__box__text", placeholder: "type a message"
      = f.label :image, class: "form__box__label" do
        = icon('far', 'image',class: "form__box__label__icon")
        = f.file_field :image, class: "form__box__label__input" 
    = f.submit 'Send', class: "form__btn"

_side_bar.scss

* {
  box-sizing: border-box;
}
.side_bar {
    width: 300px;
    background-color: #253141;
    color: $White;
    height: 100vh;
    float: left;
    .user {
      height: 100px;
      display: flex;
      align-items: center;
      margin: 0 20px;
    }
}

.user__info{
  line-height: 20px;
  width: calc(300px - 20px - 20px);
  display: flex;
  justify-content: space-between;
  &--name {
    font-size: 16px;
  }
  &__btn {
    width: 60px;
    &--gear {
      float: right;
      &--link {
        text-decoration: none;
        color: $White;
      }
    }
    &--edit {
      float: right;
      margin-right: 5px;
      &--link {
        text-decoration: none;
        color: $White;
      }
    }
  }
}

.index {
  height: calc(100vh - 100px);
  background-color: #2f3e51;
  &__group {
    color: $White;
    text-decoration: none;
    &__name {
      font-size: 15px;
      padding: 20px 20px 5px;
    }
    &__message {
      font-size: 11px;
      padding: 0 20px 40px;
    }
  }
}

_main_chat.scss

.main_chat {
  width: calc(100vw - 300px);
  background-color: $White;
  height: 100vh;
  float: right;
}

.current_group {
  display: flex;
  justify-content: space-between;
  height: 100px;
  width: 100%;
  &__left {
    margin-left: 40px;
    &__name {
      @include fsize-color(20px,#333333);
      margin-top: 35px;
    }
    &__member {
      @include fsize-color(12px,#999999);
      margin-top: 15px;
    }
  }
  &__btn {
    @include fsize-color(16px,#38aef0);
    width: 70px;
    line-height: 38px;
    border: 1px solid;
    margin: 28px 40px 32px 0;
    text-decoration: none;
    text-align: center;
  }
}

.log {
  height: calc(100% - 100px - 90px);
  background-color: #fafafa;
  overflow: scroll;
  &__info {
    padding: 35px 0 11px 40px;
  }
}

.log__info__user {
  &__name {
    @include fsize-color(16px,#333333);
  }
  &__time {
    @include fsize-color(12px,#999999);
    vertical-align:top;
  }
}

.log__info__message {
  @include fsize-color(14px,#434a54);
  margin-top: 12px;
}

.form {
  height: 90px;
  background-color: #d2d2d2;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__box {
    width: calc(100% - 15px - 90px);
    margin-right: 15px;
    background-color: $White;
    display: flex;
    justify-content: space-between;
    position: relative;
    &__text {
      width: 100%;
      margin-left: 10px; 
      line-height: 50px;
      border: none;
    }
    &__label {
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 10px;
      &__icon {
        font-size: 25px;
      }
      &__input {
        display: none;
      }
    }
  }
  &__btn {
    width: 90px;
    background-color: #38aef0;
    color: $White;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
  }
}

_reset.scss

/*!
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
    TODO will need to remove settings on HTML since we can't namespace it.
    TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
  color:#000;
  background:#FFF;
}
/*
  TODO remove settings on BODY since we can't namespace it.
*/
/*
  TODO test putting a class on HEAD.
      - Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,
img {
  border:0;
}
/*
  TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style:normal;
  font-weight:normal;
}

ol,
ul {
  list-style:none;
}

caption,
th {
  text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,
q:after {
  content:'';
}
abbr,
acronym {
  border:0;
  font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
  vertical-align:text-top;
}
sub {
  vertical-align:text-bottom;
}
input,
textarea,
select {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
  color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

試したこと

補足情報（FW/ツールのバージョンなど）

Rails 5.0.7.2を使用して作成しました。

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

回答2件

自己解決

なんとか解決できました。

width 100vwだとMacはビューにスクロールバーを含む
Windowsはビューにスクロールバーを含まない。
よって、ビューのどこかにwidth 100vwがあると
Macでは異常なし、windowsではスクロールバーがあればずれる　ってことになるみたい。
私のケースでは.main-chatでwidth: calc(100vw - 300px);を使用していたためにwindowsではスクロールバーが追加され、ずれていました。
上記をwidth: calc(100% - 300px);に変更すると上手くいきました。
要は、thyda.eiqauの仰る通り、widthでは100%使っとけ、てことですかね。

おまけ
どうしてもwidth 100vwが使いたい！て奇特な人がいるならば
::-webkit-scrollbar {
width: 10px;
}
を使用するとmacでもスクロールバーがビューの外に表示されますので
その状態でレイアウトすれば、macでもwindowsでもビュー崩れせずにいけそうです。

投稿2020/01/15 16:37

hashimo1013

総合スコア6