Разверните гибкий контейнер в соответствии с его дочерними элементами с помощью flex grow - PullRequest
Новая
       3

Разверните гибкий контейнер в соответствии с его дочерними элементами с помощью flex grow

0 голосов
/ 29 мая 2020

У меня есть контейнер с фиксированной шириной, и внутри у меня есть гибкое меню с display: flex

Я хочу, чтобы список меню увеличивался до max-width: 420px, и если он достигает максимальной ширины, он должен обернуться и отображаться в следующей строке, поэтому я не могу использовать white-space: nowrap, что делает мой список меню прокручиваемым, если он превышает 420 пикселей. Как сделать так, чтобы родительское меню увеличивалось пропорционально списку меню. В приведенном ниже примере красный фон должен увеличиться на 420 пикселей. 

.container {
  display: block;
  padding: 10px;
  width: 180px;
}

.menu {
  background-color: red;
  display: inline-flex;
}

.menu-list {
  margin: 10px;
  flex: 1 0 auto;
  max-width: 420px;
}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Если максимальная ширина .menu-list составляет 420 пикселей, то почему бы просто не дать .menu такой же максимум?

Затем сделать оболочку верхнего уровня гибким контейнером и отключить сжатие на .menu. 

.container {
  display: flex;
  max-width: 180px;
  border: 2px dashed black;
}

.menu {
  flex-shrink: 0;
  max-width: 420px;
  border: 2px solid green;
}

.menu-list {}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>
0 голосов
/ 29 мая 2020

Вот идея использования width: max-content; (это не будет работать на IE: https://caniuse.com/#feat = mdn-css_properties_width_max-content ) 

.container {
  padding: 10px;
  margin:5px;
  max-width: 180px;  
}
.menu {
  background-color: red;
  display: inline-block;
}
.menu-list {
  margin: 10px;
  width:max-content;
  max-width: 420px;
}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox jumps over the lazy dog brown fox jump s over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox</div>
      <div class="option">2. The quick brown </div>
      <div class="option">3. The quick bro</div>
      <div class="option">4. The qui</div>
    </div>
  </div>
</div>

Еще одна идея с использованием сетки CSS. 

.container {
  padding: 10px;
  margin:5px;
  max-width: 180px;  
}
.menu {
  background-color: red;
  display: inline-grid;
  grid-auto-columns: max-content;
}
.menu-list {
  margin: 10px;
  max-width: 420px;
}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox jumps over the lazy dog brown fox jump s over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox</div>
      <div class="option">2. The quick brown </div>
      <div class="option">3. The quick bro</div>
      <div class="option">4. The qui</div>
    </div>
  </div>
</div>
...