Question

我正在尝试创建一个flex div的容器，其中所有div都具有相同的宽度（每行两个div，每个容器的宽度为50％）。

我已使用max-width: 50%;在容器内设置了div，因为我希望它们是等于的，但是当此行中只有一个项目时它似乎不尊重此max-width。

HTML ：

<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
  </div>
  <div id="right" class="block">Right</div>
</div>

CSS ：

html, body{
    width: 100%;
    height: 100%;
}

#container{
    display: flex;
    height: 100%;
    background-color: blue;
}

.block{
    flex: 1;
}

#left{
    background-color: green;
}

#center{
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;
}

#right{
    background-color: orange;
}

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    height: 150px;
    background-color: red;
    padding: 10px;
}

.flexDiv{
    width: 100%;
    height: 100%;
    background-color: yellow;
}

JSFiddle，您可以在其中看到第三个元素的宽度大于其他元素的宽度。

为什么容器内的flex div不尊重max-width属性？

提前致谢！

Answer 1

您可以重置或切换框模型，以便在padding计算中包含width：

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

https://www.w3.org/TR/css-ui-3/#box-sizing

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    height: 150px;
    background-color: red;
    padding: 10px;
    box-sizing:border-box;/* includes borders & padding within width calculation
}

https://jsfiddle.net/b5h9rjcd/1/

Flex项覆盖max-width属性

1 个答案: