Question

我有以下情况：

<div display:flex>
   <div1 width:50%/>
   <div2 width:50%/>
</div>

内部的这两个div（div1和div2）具有width: 50%（每个）。 div2最初是一个空的div，但是是其中的img容器。

我的问题：当用户放下文件并且在img中显示预览时，这些容器（div1和div2）的大小正在调整（它们的宽度会改变，因此不是50％他们每个人都没有。）

我的问题：在每种情况下如何强制这两个容器div1和div2不调整大小？谢谢！

Answer 1

希望下面的代码段有所帮助。

.flex-container{
  display: flex;
  flex-direction: row;
  height: 100px;
  align-items: center;
}
.flex-child{
  flex: 1;
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

<div class="flex-container">
   <div class="flex-child">Content 1</div>
   <div class="flex-child">Content 2</div>
</div>

Answer 2

您几乎没有办法让弹性儿童不成长。包括print(1, 2, "a", sep="/") # 1/2/a

但是根据经验，您应该将图片标签限制为flex-grow: 0 这样他们就不会溢出容器

max-width: 100%

.wrapper {
  max-width: 100%;
  display: flex;
}

.wrapper>div {
  width: 50%;
}

.wrapper>div:first-child {
  background: red;
}

.wrapper>div:last-child {
  background: blue;
}

.wrapper>div img {
  max-width: 100%;
  display: block;
}

两个容器在Flex中意外调整大小

2 个答案: