溢出的最大宽度:滚动元素以匹配flex-grow父元素的宽度

时间:2017-09-18 21:05:30

标签: html css css3 flexbox

我有一个容器#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;
}




1 个答案:

答案 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;
&#13;
&#13;