CSS flex-box，如何让一个item在横轴方向拉伸小于内容？

Question

我正在尝试制作一个带有并排 div 的容器，一个项目具有固定宽度，另一个项目具有固定高度。 但是，灵活高度的 div 不会缩小到其内容以下。

 .parent { background: #f00; display: contents; }.container { background: #0f0; width: 25vw; display: flex; }.object { background: #00f; margin: 10px; width: 100px; flex-shrink: 0; }.object.flexes-main-axis { flex-grow: 1; flex-shrink: 1; }.object.sets-cross-axis-size { height: 75px; }.object.shrinks-cross-axis-below-content { overflow-y: auto; }.child { background: #f0f; height: 100px; width: 100px; }

 <div class='parent'> <div class='container'> <div id="object1" class='object flexes-main-axis sets-cross-axis-size'></div> <div id="object2" class='object shrinks-cross-axis-below-content'> <div class="child"></div> </div> </div> </div>

当我将 object1 缩小到 100px 以下时，我试图让 object2 缩小并显示垂直滚动条。 洋红色框代表我不能收缩的固定高度内容，而object1代表我要控制容器高度的元素。

Answer 1

蓝色硬编码为75px高，而洋红色硬编码为100px 。

由于主.container没有设置height ，它会增长以适应最高的孩子。 具有固定height: ..px的主.container : ..px 仍然不会使.child收缩。 那是 Flexbox。

但是，如果您将.child设置为height: 100% ，您会看到它缩小了：

 * { outline: 1px dashed } /* for debugging */.parent { background: #f00; display: contents; }.container { background: #0f0; width: 25vw; display: flex; }.object { background: #00f; margin: 10px; width: 100px; flex-shrink: 0; }.object.flexes-main-axis { flex-grow: 1; flex-shrink: 1; }.object.sets-cross-axis-size { height: 75px; }.object.shrinks-cross-axis-below-content { overflow-y: auto; }.child { background: #f0f; height: 100%; /* Changed from 100px */ width: 100px; }

 <div class='parent'> <div class='container'> <div id="object1" class='object flexes-main-axis sets-cross-axis-size'>1</div> <div id="object2" class='object shrinks-cross-axis-below-content'> <div class="child">2</div> </div> </div> </div>

Answer 2

所以，我想通了。 我需要在 object2 和高度设置为 0 的子项之间添加一个额外的包装器 div。Object2 将滚动以适应子项溢出，但就 flexbox 而言，子项的高度不会计入 object2 的内容。 现在，当您将 object1 的高度更改为低于 child 的高度时，您将在 object2 中获得一个滚动条。

同样在这个版本中，我让 object1 响应视口宽度，因此您可以通过调整浏览器大小来尝试一下 window。

 .container { display: flex; background-color: red; padding: 10px; width: 50vw; }.sizecontroller { aspect-ratio: 16 / 9; background-color: blue; padding: 10px; flex-grow: 1; flex-shrink: 1; }.sizeresponsive { overflow-y: auto; background-color: green; padding: 10px; flex-grow: 0; flex-shrink: 0; }.sizeeraser { height: 0; background-color: purple; padding: 10px; }.sizefixed { width: 25px; height: 250px; background-color: yellow; padding: 10px; }

 <div class="container"> <div class="sizecontroller"></div> <div class="sizeresponsive"> <div class="sizeeraser"> <div class="sizefixed"></div> </div> </div> </div>