当方向为列时，Flex 收缩无法按预期工作答案

【问题标题】：Flex shrink not working as expected when direction is column当方向为列时，Flex 收缩无法按预期工作
【发布时间】：2020-12-27 16:07:20
【问题描述】：

我在下面提供了以下小 sn-p 和沙箱。当 flex-direction 设置为“row”时，图像会按预期缩小以适应。但是，当我设置为“列”时，图像不再按预期缩小。我已经尝试按照其他帖子设置高度，但无法正常工作。

通过在 flex-direction 下将“row”更改为“column”，在沙盒中自己尝试一下。您可以更改沙箱的窗口大小，以查看图像如何更改大小以适应。当设置为列时，图像最终只是父级的 100% 宽度。我好像搞不懂！！p>

CSS：

.container {
  background-color: blue;
  min-width: 0px;
  min-height: 0px;
  max-height: 400px;
  max-width: 400px;
}

.cell {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.div-item {
  flex: 1 0 50px;
}

.image-pic {
  display: block;
  min-width: 0px;
  min-height: 0px;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

反应：

import React from "react";
import "./styles.css";
import { Image } from "react-bootstrap";
import useravatar from "./user.jpg";

export default function App() {
  return (
    <>
      <div className="container">
        <div className="cell">
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
         
         
        </div>
      </div>
    </>
  );
}

在此处查看沙盒：

https://codesandbox.io/s/flex-wrap-with-bootsrap-forked-808gd?file=/src/styles.css

【问题讨论】：

不，它的正常行为，你添加了max-height，所以它会重叠
预期行为。你想达到什么目的？
@codemax 我试图让图像在设置为列时缩小以适合容器。当前，当它设置为行时，图像会缩小并适合容器。如果设置为列，图像只会达到 100% 宽度并堆叠在容器外。
@NishargShah 如何让它不重叠，而只是缩小容器设置侧的图像？
使用overflow: hidden

标签： html css reactjs flexbox

【解决方案1】：

我是初学者，所以我可能是错的，但我解决问题的想法是当你给你可以控制的图像父 div 一定的 width 和 height他们。因此，通过这种方式，您可以避免它们在包裹时变大。（你也使用 flex: 1 0 50px 但 flex-basis 只使用 %）

.cell {
  width: 100%;
  display: flex;
  flex:0 0 100%;
  flex-wrap: wrap;
  flex-direction: row;
}
.div-item {
  width:50px;
  height:50px;
}

【讨论】：