Растянуть гибкий родительский элемент до (переменной) дочерней ширины в контейнере с прокруткой - PullRequest
Новая
       11

Растянуть гибкий родительский элемент до (переменной) дочерней ширины в контейнере с прокруткой

0 голосов
/ 22 декабря 2018

Вот что у меня есть (от внешнего к внутреннему):

  1. Родительский элемент с overflow: scroll и фиксированной шириной.
  2. Вертикальный список элементов с переменной шириной
  3. Элементы списка имеют display: flex и flex-direction: row
  4. Внутри каждого элемента списка есть значок и метка рядом друг с другом по горизонтали

Я хочу, чтобы элементы спискавзять столько ширины, сколько им нужно, чтобы вместить их flexed дочерние элементы, так как корневой родительский элемент прокручиваемыйС помощью flex-shrink: 0.

я могу заставить значок и метку занимать столько ширины, сколько им нужно. Проблема в том, что Ширина списка элементов (# 3 в списке выше) ограничена ширинойпрокручиваемый родительский контейнер вместо его дочерних элементов.

Это плохо, потому что элементы списка имеют отступы и цветной фон. Вот пример для CodePen .Прокрутите горизонтально там, где написано «Lorem ipsum», чтобы понять, что я имею в виду.

Спасибо!

1 Ответ

0 голосов
/ 22 декабря 2018

Просто сделайте list элементом inline-block, и он не будет ограничен родительской шириной и расширится до самого длинного элемента: 

.nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #f1f1f5;
  overflow: scroll;
}
.list {
  display:inline-block;
}

.item-container {
  padding: 0 16px;
  background: #222225;
  color: #e1e1e8;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon {
  flex-shrink: 0;
}

.label {
  flex-shrink: 0;
  white-space: nowrap;
}
<div class="nav"> 
  <div class="list">
    <div class="item-container">
      <div class="item">
        <div class="icon">?</div>
        <div class="label">Lorem ipsum dolor sit amet yata yata yata</div>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <div class="icon">?</div>
        <div class="label">Lorem ipsum</div>
      </div>
    </div>
  </div>
</div>
...