我有一个容器#container
,其宽度固定,有三个孩子.item
。每个都具有100px的弹性基础,但中间的.item-grow
应该增长,以便使用#container
的所有宽度。这与预期的一样。
.item-grow
元素有另一个子级#too-big
,它可能比可用父级的宽度宽,因此它包含在#scroll
容器内overflow: scroll
和{ {1}}。
问题是,max-width: 100%
会忽略#scroll
并强制父max-width: 100%
增长,这会使容器.item-grow
增长。
如果我设置#container
而不是max-width: 296px
它可以正常工作,但我正在寻找动态(仅限CSS)解决方案。
在嵌入式代码中,您可以找到一个更改max-width: 100%
大小的滑块,您可以清楚地看到它增长了父级而不使用滚动条。
#too-big

function setSize (newValue) {
let elem = document.getElementById("too-big");
elem.setAttribute("style",`width:${newValue}px; height:${newValue}px`);
}

#container {
background-color: red;
display: flex;
width: 500px;
height: 200px;
}
.item {
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
border: solid black 1px;
background-color: gray;
}
.item-grow {
flex-grow: 1;
align-items: center;
}
.center-wrapper {
margin: auto;
display: table-cell;
}
.scroll {
overflow: scroll;
max-width: 100%; /* I want this respect the current parents width */
/* max-width: 296px; */
max-height: 100%; /* I want this respect the current parents height */
/* max-height: 200px; */
}
#too-big {
background-color: green;
width: 100px;
height: 100px;
}

答案 0 :(得分:2)
要完成这项工作,您可以放弃center-wrapper
并在margin: auto
上设置scroll
。
然后item
需要min-width: 0
才能允许它小于其内容。
要max-height: 100%
工作(跨浏览器),item-grow
需要一个高度。
Fiddle demo (with overflow: auto
instead)
Stack snippet
function setSize (newValue) {
let elem = document.getElementById("too-big");
elem.setAttribute("style",`width:${newValue}px; height:${newValue}px`);
}

#container {
background-color: red;
display: flex;
width: 500px;
height: 200px;
}
.item {
display: flex;
flex-basis: 100px;
border: solid black 1px;
background-color: gray;
box-sizing: border-box; /* added */
min-width: 0; /* added */
}
.item-grow {
flex-grow: 1;
align-items: center;
height: 100%; /* added */
}
.scroll {
margin: auto; /* added */
overflow: scroll;
max-width: 100%;
max-height: 100%;
}
#too-big {
background-color: green;
width: 100px;
height: 100px;
}

<input type="range" min=100 max=500 value=100 oninput="setSize(this.value)" onchange="setSize(this.value)">
<div id="container">
<div class="item"></div>
<div class="item item-grow">
<div class="scroll">
<div id="too-big"></div>
</div>
</div>
<div class="item"></div>
</div>
&#13;