CSS - Как предотвратить увеличение ширины последнего элемента во flexbox по сравнению с доступным пространством?

Question

Во flexbox у меня есть 2 элемента подряд, которые не обернуты. Первый имеет определенную ширину. Я хочу, чтобы второй элемент занял доступное пространство, поэтому я использую это:

flex: 1 1 100%;

Пока проблем нет. Но на страницах, где у второго элемента есть дополнительный материал, ширина элемента увеличивается до ширины родительского элемента (так как я использовал max-width: 100% на нем), которая затем выходит из контейнера flex. Если я использую wrap, тогда элемент переходит на следующую строку, но я не хочу их переносить.

Итак, вот моя проблема: как я могу установить ширину элемента внутри flexbox, чтобы она была точно равна доступному пространству? Не больше, не меньше.

Answer 1

Дайте flex: auto; гибкому элементу , что означает:

 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;

и flex:none; до негибкий (в сочетании с желаемыми width в единицах длины или процентах). flex:none переводится как:

 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;

Посмотри как это работает:

.flex {
  display: flex;
}
.flexible {
  flex: auto;
  border: 1px solid blue;
}

.inflexible {
  flex: none;
  width: 200px;
  border: 1px solid red;
}

<div class="flex">
  <div class="flexible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
  </div>
  <div class="inflexible"></div>
</div>
<div class="flex">
  <div class="flexible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
  </div>
</div>
<div class="flex">
  <div class="flexible"></div>
  <div class="inflexible"><p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Blandit turpis cursus in hac habitasse platea. Malesuada pellentesque elit eget gravida cum sociis. Massa id neque aliquam vestibulum morbi blandit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Ac turpis egestas sed tempus urna et. Sed risus ultricies tristique nulla. Velit aliquet sagittis id consectetur. Sit amet luctus venenatis lectus magna. In dictum non consectetur a erat nam at lectus. Risus nullam eget felis eget. Quis lectus nulla at volutpat diam. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Ultricies leo integer malesuada nunc vel risus. Vitae auctor eu augue ut lectus arcu. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Pharetra sit amet aliquam id.

<p>Porta non pulvinar neque laoreet suspendisse interdum. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Ultrices in iaculis nunc sed augue lacus viverra. At imperdiet dui accumsan sit amet. Urna condimentum mattis pellentesque id nibh. Enim diam vulputate ut pharetra sit amet. Vel pharetra vel turpis nunc. Et ligula ullamcorper malesuada proin libero. Proin libero nunc consequat interdum varius sit. Nisi porta lorem mollis aliquam. Volutpat odio facilisis mauris sit amet massa. Arcu odio ut sem nulla pharetra diam. Gravida arcu ac tortor dignissim convallis aenean. Tellus cras adipiscing enim eu turpis. Risus pretium quam vulputate dignissim.</div>
</div>

Документация здесь .

Наблюдение : если вы не укажете width для негибкого элемента, он займет место в соответствии с его содержимым, а оставшееся пространство будет оспорено (или заполнено) гибким элементом (ами). В таких случаях вы можете дать гибкий предмет min-width, чтобы убедиться, что он не будет раздавлен своим братом или сестрой.

Answer 2

Если вы оберните два элемента оболочкой родительского элемента, имеющей display flex, вы можете установить ширину двух внутренних элементов с помощью свойства flex.

Использование flex: 0 0 200px для первого элемента устанавливает ширину 200px и flex: 1 1 автоматически, когда второй элемент заполняет оставшееся пространство.

Код в действии

.parent-element{
  display: flex;
}

.first-element{
  flex: 0 0 200px; 
  border: 1px solid red
}

.second-element{
  display:flex; 
  flex: 1 1 auto;
  border: 1px solid blue
}

.second-element-content{
  flex: 1 1 auto; 
  border: 1px solid black
}

    <div class="parent-element">
    	<div class="first-element">first element</div>
    	<div class="second-element">
    		<div class="second-element-content">content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
    		  content in second column should now fit fine.. 
        	content in second column should now fit fine..
        	content in second column should now fit fine..
        	content in second column should now fit fine..
            </div>
    	</div>
    <div>

Answer 3

Попробуйте настроить второго ребенка на рост и сжатие, а первого ребенка - только на сокращение (если вы этого хотите).

change .box - исправлено на: flex: 0 1 300px, если вы хотите уменьшить, когда это возможно. Вы также можете использовать значения <1, чтобы уменьшить его. </p>

В конечном итоге, если содержимое в фиолетовом div больше не может уменьшаться, оно будет переполнено, так что просто объясните это, а) оборачивая его ИЛИ b) уменьшив первый div

.wrap {
    display: flex;
    flex-wrap: nowrap;
}

.box {
    flex: 1 1 auto;
    min-height: 200px;
    background-color: rebeccapurple;
}

.box--fixed {
    flex: 0 0 300px;
    // flex: 0 1 300px;
    background-color: #bada55;
}

<div class="wrap">
    <div class="box box--fixed"></div>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, dolores animi ab perspiciatis tenetur quis alias illum soluta provident deserunt similique tempore minima consectetur, eaque exercitationem quas nihil nisi voluptates.
    </div>
</div>

Answer 4

Лучшее решение, которое я нашел, было max-width: calc(100% - fixed_width_of_first_element px);

Подробнее о calc .