Overflow가 작동하지 않음(EOTD No.12)

저는 아메타!12번째 EOTD다.
오늘의 잘못은 해결하지 못하고 끝났으니 여기에 새겨라.

오늘의 잘못

장면

현재 작성 중인 응용 프로그램 Gravy를 설치하는 동안 발생한 현재 진행률 오류입니다.
나는 원고의 요리 일람을 수평으로 스크롤해서 확인하려고 했다.
각각

<ul class='dish-lists'>
  <% @dishes.each do |dish| %>
  <li class='list'>
    <%= link_to dish_path(dish.id) do %>
    <div class='dish-img-content'>
      <%= image_tag dish.image, class: "dish-img" %>
    </div>
    <div class='dish-info'>
      <div>
        <h3 class='dish-name'>
          <%= dish.name %>
	</h3>
        <div class='dish-price'>
          <span><%= dish.price %>円 / <%= dish.chef.name %>シェフ</span>
        </div>
      </div>
      <div class='heart-btn'>
      <%= image_tag "heart.png", :size =>'20x20', class:"heart-icon" %>
      <span class='heart-count'>0</span>
      </div>
    </div>
    <% end %>
  </li>
</ul>

ul와 li에 클래스를 제공하고 CSS에서 다음과 같이 설명한다.

ul.dish-lists {
  width: inherit;
  overflow-x: auto;
  white-space: nowrap;
}

li.list {
  display: inline-block;
  width: 30vh;
  padding: 1.5vw 1.5vw 0;
  background-color: white;
  border: 1px gray solid;
}

결과는 다음과 같다.

초과된 요소overflow: hidden;가 숨겨지고 스크롤 막대가 표시됩니다.
하지만!스크롤하고 싶어도 이 표지를 이동할 수 없고 오른쪽 요리의 전체적인 상황을 확인할 수 없습니다.

고찰하다.

조사에서 몇 가지 이유를 제시했기 때문에 시도해 봤습니다.

가로 너비(width)를 절대값으로 지정하지 않았습니다.

가끔 Retina 모니터에 표시되지 않습니다.

1. 절대값의 너비가 지정되지 않았습니다(width)

ul.dish-lists {
  width: inherit;
  overflow-x: auto;
  white-space: nowrap;
}

li.list {
  display: inline-block;
  width: 30vh;
  padding: 1.5vw 1.5vw 0;
  background-color: white;
  border: 1px gray solid;
}

이번 가로폭은 절대값ul.dis-lists의width가 없습니다.
여기를 지정하지 않으면 스크롤이 작동하지 않는다는 보고가 여러 개 있다.

ul.dish-lists {
  width: 1000px;
  overflow-x: auto;
  white-space: nowrap;
}

따라서 width를 1000px로 설정하고 다시 시도합니다.

스크롤 막대가 표시되지만 스크롤할 수 없습니다.

2. Retina 모니터에 표시되지 않는 경우가 있습니다.

조사 중에 신경 쓰이는 보도가 하나 발견되었다.
https://qiita.com/morikooooo/items/7612c7736ee3fbed8120
이분에 따르면 굴릴 수 없는 사람의 PC는 맥북 프로, 굴릴 수 있는 사람의 PC는 맥북 에어다.
그리고 이 두 컴퓨터의 차이점 중 하나는 바로 모니터다.
현재 판매되는 모델은 프로든 에어든 모두 리티나 디스플레이다.
이 오류를 해결한 코드는 여기 있습니다.

transform: translateZ(0);

실제 이 코드를 overflow와 같은 블록에 포함시켜 동작을 확인했지만 변화가 없었다.

SOTD(Summary Of The Day)

오늘은 유감의 시간 초과다.
이것은 처음으로 해결할 수 없는 착오가 발생한 것이어서 나는 상당히 곤란하다고 느낀다.
아마도 다른 CSS 요소가 수평으로 굴러가는 행위를 방해했을 것 같아서 팩스를 해 보는 것도 괜찮을 것 같습니다.오늘의 공부.