[LADYX]

Подскажите, пожалуйста, как показать дочерний элемент .hidden при условии, что большая часть его родительского элемента .item видна (именно по ширине, высота не имеет значения)? В противном случае дочерний элемент .hidden прятать. Спасибо.

<style>
.container {
  background-color: #f1f1f1;
  border: 2px solid black;
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 50px;
}

.item {
  display: inline-block;
  background-color: gray;
  width: 100%;
  height: 100%;
  vertical-align: top;
  margin: 0 5vw;
}

.hidden {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 25px;
}
</style>
<div class="container">
  <div class="item"><div class="hidden">Один</div></div>
  <div class="item"><div class="hidden">Два</div></div>
  <div class="item"><div class="hidden">Три</div></div>
  <div class="item"><div class="hidden">Четыре</div></div>
</div>