Div вырастает за границы, если содержимого слишком много
У меня есть родительский элемент с max-width, но внутри у меня есть таблица, которую я хочу расширить за пределы этой max-width, но только если это необходимо из-за содержимого таблицы.
Вот рабочий пример, чтобы вы могли видеть: https://jsfiddle.net/z6nbc75g/
Попробуйте нажать кнопку «Добавить столбцы» несколько раз, чтобы увидеть, как, когда вы добавляете слишком много столбцов, они начинают сжиматься, а не расширять таблицу.
Вот код:
.parent {
width: 100%;
max-width: 20rem;
}
.table .row {
display: flex;
border: 1px solid blue;
padding: 4px;
}
.table .col {
border: 1px solid red;
padding: 2px;
}<div class = "parent">
<div class = "table">
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
</div>
</div>Можно ли установить «мин. ширину» на .table .col?
Каков желаемый результат? Горизонтальная прокрутка в родителях? Столбцы видны вне родителя?
Добавьте flex-shrink: 0; к своему правилу .table .col{}, и оно не уменьшится
И обратите внимание, чтобы .parent рос вместе с контентом, его необходимо отображать inline-flex/block.
И к вашему сведению, если предполагается, что элемент расширяется за пределы заданной ширины, не используйте max-width, вместо этого используйте min-width
Ответы 4
Вы можете внести изменения в стиль строки. Добавьте свойство flex-wrap.
.table .row {
display: flex;
border: 1px solid blue;
padding: 4px;
flex-flow: row wrap;
}
Для того, что вы ищете, способ справиться с этим состоит в том, чтобы сделать ваш элемент .parent как inline-block (чтобы он занимал только ширину дочерних элементов), а затем предотвратить перенос столбцов (при условии, что вы хотите, чтобы весь ваш контент внутри столбца, чтобы он находился на одной строке — если вы этого не сделаете, таблица все равно будет расширяться, пока не достигнет ширины страницы, а затем заставит текст переноситься внутри столбцов).
Фрагмент ниже — я добавил кнопку из вашего jsfiddle, чтобы вы могли проверить это :)
document.querySelector('button').addEventListener('click', () => {
let rows = document.querySelectorAll('.row');
rows.forEach(row => {
let col = document.createElement('div');
col.classList.add('col');
col.textContent = 'lorem ipsum';
row.appendChild(col);
});
});.parent {
display:inline-block;
}
.table .row {
display: flex;
border: 1px solid blue;
padding: 4px;
}
.table .col {
border: 1px solid red;
padding: 2px;
}<div class = "parent">
<div class = "table">
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
<div class = "row">
<div class = "col">lorem ipsum</div>
<div class = "col">lorem ipsum</div>
</div>
</div>
</div>
<button>Add columns</button>Это работает, но ширина строки не меняется, она просто переполняется
Привет @nick, я вытащил white-space:nowrap - это больше, что ты ищешь?
Вы можете использовать min-width: max-content: https://developer.mozilla.org/en-US/docs/Web/CSS/width#max-content
Рабочий пример: https://jsfiddle.net/r84q7nvj/
Это работает, но поддержка браузера ужасна :/
@ник понятно. Я добавил альтернативный ответ.
Вы также можете решить эту проблему, используя display: inline-flex для родителя вместе с min-width: 200px и flex-basis для его дочерних элементов: https://jsfiddle.net/cnxgruzt/
@Ingus нет, мой случай на самом деле противоположный и совершенно другой