Почему появляется дополнительное место в низу списка?

Question

[Андрей Титов]

.currList {
    max-height: 100%;
    height: 100%;
    max-width: 300px;
    list-style-type: none;
    overflow-y: auto;
    margin-right: 50px;
    background: #f3f3f3;
    padding: 20px;
}

Comments

[aloky]

max-height: 100%; height: 100%; Мне кажется из за это

[DivineDraft]

1. Попробуйте добавить к .currList - float:left;
2. Попробуйте добавить к li float:left;wdith:100%;
3. Укажите ссылку на сайт, либо закиньте на codepain или jsfiddle.

[Dinwid]

Покажите скрипт...

[Андрей Титов]

Dinwid,

class App extends Component {
  render() {
    return (
      <div className="app">
        <aside>
          <ul className="currList">
            {currencies.map(curr => (
              <li key={curr} className="currItem">
                <input type="checkbox" id={curr} />
                <label htmlFor={curr}>{curr.toUpperCase()}</label>
              </li>
            ))}
          </ul>
        </aside>
      </div>
    );
  }
}

[Dinwid]

Андрей Титов,
С React не сильно знаком...
Но логично проверить currencies.
Проблема явно в нем.

[Андрей Титов]

Dinwid, проверить как и на что?

Answer 1

[php_raper]

В твоем скрине не видно последнего элемента списка.

Html выводишь через for? Или это статическая верстка ?

Comments

[Андрей Титов]

class App extends Component {
  render() {
    return (
      <div className="app">
        <aside>
          <ul className="currList">
            {currencies.map(curr => (
              <li key={curr} className="currItem">
                <input type="checkbox" id={curr} />
                <label htmlFor={curr}>{curr.toUpperCase()}</label>
              </li>
            ))}
          </ul>
        </aside>
      </div>
    );
  }
}