Ячейка Flexbox не соответствует размеру содержащейся ячейки Flexbox
У меня есть макет страницы, в котором используется flexbox - например, ячейка / столбец содержимого и ячейка / столбец навигации. Внутри содержимого у меня есть таблица данных flexbox. Одна из ячеек / столбцов, если таблица имеет содержимое, которое может быть довольно широким, шире, чем сама ячейка, и у меня для overflow-x установлено значение auto, чтобы его можно было прокручивать по горизонтали.
Хотя такая прокрутка не идеальна, она случается нечасто, и я рад представить ее в таком виде.
В пределах таблицы flexbox это работает нормально. Однако ячейка макета страницы не будет уменьшаться в размере до более узкого, чем это широкое содержимое - она игнорирует ширину ячейки таблицы и использует ширину прокручиваемого в ней содержимого.
Если я добавлю overflow: hidden в ячейку содержимого макета страницы, он будет корректно сжиматься, однако это останавливает работу position: sticky со строками в пределах flexbox таблицы содержимого.
В следующем примере показаны 2 строки таблицы содержимого. Первая верхняя часть содержится во флекс-боксе «макет страницы», вторая - нет. Второй имеет «правильный» размер по отношению к контейнеру, первый - «неправильно» по размеру для содержимого данных и заставляет всю страницу прокручиваться по горизонтали.
Есть ли способ добиться «правильного» размера при встраивании в ячейку flexbox?
.pg_main {
display: flex;
flex-flow: row wrap;
}
.pg_content {
flex: 1 0 20px;
}
.Row {
display: flex;
flex-flow: row wrap;
}
.Type {
flex: 0 0 150px;
}
.Price {
flex: 1 0 150px;
white-space: nowrap;
overflow-x: auto;
}
.Price div {
display: inline-block;
text-align: center;
padding: 0 4px;
} <br/>
<div class = "pg_main">
<div class = "pg_content">
<div class = "Row">
<div class = "Type">Type</div>
<div class = "Price">
<div>100g<br/>$88.00</div>
<div>200g<br/>$88.00</div>
<div>300g<br/>$88.00</div>
<div>400g<br/>$88.00</div>
<div>500g<br/>$88.00</div>
<div>600g<br/>$88.00</div>
<div>700g<br/>$88.00</div>
<div>800g<br/>$88.00</div>
<div>900g<br/>$88.00</div>
<div>1000g<br/>$88.00</div>
<div>1100g<br/>$88.00</div>
<div>1200g<br/>$88.00</div>
<div>1300g<br/>$88.00</div>
<div>1400g<br/>$88.00</div>
<div>1500g<br/>$88.00</div>
<div>1600g<br/>$88.00</div>
<div>1700g<br/>$88.00</div>
<div>1800g<br/>$88.00</div>
<div>1900g<br/>$88.00</div>
<div>2000g<br/>$88.00</div>
<div>2100g<br/>$88.00</div>
<div>2200g<br/>$88.00</div>
<div>2300g<br/>$88.00</div>
<div>2400g<br/>$88.00</div>
<div>2500g<br/>$88.00</div>
<div>2600g<br/>$88.00</div>
<div>2700g<br/>$88.00</div>
<div>2800g<br/>$88.00</div>
<div>2900g<br/>$88.00</div>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class = "Row">
<div class = "Type">Type</div>
<div class = "Price">
<div>100g<br/>$88.00</div>
<div>200g<br/>$88.00</div>
<div>300g<br/>$88.00</div>
<div>400g<br/>$88.00</div>
<div>500g<br/>$88.00</div>
<div>600g<br/>$88.00</div>
<div>700g<br/>$88.00</div>
<div>800g<br/>$88.00</div>
<div>900g<br/>$88.00</div>
<div>1000g<br/>$88.00</div>
<div>1100g<br/>$88.00</div>
<div>1200g<br/>$88.00</div>
<div>1300g<br/>$88.00</div>
<div>1400g<br/>$88.00</div>
<div>1500g<br/>$88.00</div>
<div>1600g<br/>$88.00</div>
<div>1700g<br/>$88.00</div>
<div>1800g<br/>$88.00</div>
<div>1900g<br/>$88.00</div>
<div>2000g<br/>$88.00</div>
<div>2100g<br/>$88.00</div>
<div>2200g<br/>$88.00</div>
<div>2300g<br/>$88.00</div>
<div>2400g<br/>$88.00</div>
<div>2500g<br/>$88.00</div>
<div>2600g<br/>$88.00</div>
<div>2700g<br/>$88.00</div>
<div>2800g<br/>$88.00</div>
<div>2900g<br/>$88.00</div>
</div>
</div>
<br/>
min-width: от 0 до .pg_content