Адаптивные элементы перестают сжиматься и исчезают с экрана - PullRequest
Новая
       13

Адаптивные элементы перестают сжиматься и исчезают с экрана

1 голос
/ 02 октября 2019

Я делаю список Todo и у меня проблемы с CSS.

Я обрезал текст для каждого элемента в списке задач, используя: 

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: table-cell;

Однако, div элементов списка не будет уменьшать свою ширину после определенной точки. Это как если бы где-то действует правило минимальной ширины. Когда я продолжаю сжимать окно браузера, элементы уходят с экрана вправо.

Мой желаемый результат - уменьшать ширину элемента списка с окном браузера, пока браузер не сможет сузиться. также текст div должен сжиматься и усекаться с div, который его содержит. 

ul {
  margin-top: 100px;
  padding-left: 10%;
  list-style-type: none;
  margin-top: 100px;
  padding-left: 0%;
  list-style-type: none;
  margin-left: 10%;
  margin-right: 10%;
}

li button {
  margin-right: 10px;
  margin-top: 7px;
  height: 40px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.itemdiv {
  width: 100%;
  min-height: 55px;
  margin-bottom: 20px;
  background: #9DBDCF;
  text-indent: 20px;
  font-size: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  max-height: 55px;
  display: table;
}

.buttondiv {
  width: 200px;
  display: table-cell;
}

.text {
  height: 50px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell;
}
<div id="listcontainer">
  <ul id="itemlist">
    <li>
        <div class="text"></div>
        <div class="buttondiv">

          <button id="complete" class="complete"></button>
          <button id="remove" class="remove"></button>
        </div>
    </li>
  </ul>
</div>
...