Flex - 三列，3d 超出屏幕答案

【问题标题】：Flex - three columns, the 3d one goes beyond the screenFlex - 三列，3d 超出屏幕
【发布时间】：2017-12-10 22:50:30
【问题描述】：

运行此代码时，右侧的列会远远超出屏幕，向右。

我希望侧栏具有响应性，而中间栏具有固定宽度。
如何让它在 IE10 中运行？

布局：

<div class="wrapper">
    <div class="left"></div>
    <div class="middle">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet
        </div>
    </div>
    <div class="right"></div>
</div>

CSS：

.wrapper {
  height: 80px;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.wrapper .left {
  height: 100%;
  flex: 0 0 100%;
  background-color: yellow;
}
.wrapper .middle {
  height: 100%;
  flex: 0 0 800px;
  background-color: orange;
}
.wrapper .right {
  height: 100%;
  flex: 0 0 100%;
  background-color: red;
}

【问题讨论】：

标签： css flexbox internet-explorer-10

【解决方案1】：

您没有正确使用flex 速记。这是正确的格式： flex: <flex-grow> <flex-shrink>? || <flex-basis> ;

我已经改变了你的，以适应你的规范，包括 IE。由于 800ox 的固定宽度，您需要全屏查看。

.wrapper {
  height: 80px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wrapper .left {
  height: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  background-color: yellow;
}
.wrapper .middle {
  height: 100%;
  width: 800px;
  background-color: orange;
}
.wrapper .right {
  height: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  background-color: red;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="middle">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet
    </div>
  </div>
  <div class="right"></div>
</div>

【讨论】：

很高兴能帮上忙，如果您能将我的答案标记为正确，请勾选我的答案旁边的勾号。

【解决方案2】：

你可以使用 flex: 1;对于您的左右列，它是独立的。您实际上不需要指定 flex-shrink 和 flex-basis 值，因为它们将根据 flex-grow 属性进行合理设置。

【讨论】：

这是真的，除了 IE，它实际上需要指定 3 个属性，加上 base 还需要一个 % 或 px 不能被忽略。