Question

我有一个容器#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%大小的滑块，您可以清楚地看到它增长了父级而不使用滚动条。

＆＃13;

#too-big

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

Answer 1

要完成这项工作，您可以放弃center-wrapper并在margin: auto上设置scroll。

然后item需要min-width: 0才能允许它小于其内容。

要max-height: 100%工作（跨浏览器），item-grow需要一个高度。

Fiddle demo (with overflow: auto instead)

Stack snippet

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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;

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

1 个答案: