Question

我想使用flexbox包含网格第二个div中的所有内容。在这种情况下，图片溢出了，我不知道为什么。我希望按高度调整尺寸并保持宽高比。

body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template: repeat(2, 50vh) / repeat(3, 1fr);
  background-color: #A9A9A9;
}

.wrapper>div:nth-child(even) {
  background-color: #D3D3D3;
}

.pic2 {
  display: flex;
  flex-direction: column;
}

button {
  flex: 1;
  min-height: 40px;
  background: green;
}

img {
  flex: 1;
  max-height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">
    <div class="pic1">Div2</div>
    <div class="pic2">
      <button>Div2</button>
      <img src="https://i.imgur.com/VHtXwib.jpg">
    </div>
    <div class="pic3">Div3</div>
    <div class="pic4">Div4</div>
    <div class="pic5">Div5</div>
    <div class="pic6">Div6</div>
  </div>
</body>

</html>

Answer 1

您不能使用必须使用div来设置按钮的最小高度。除非在调整图片大小时会引起奇怪的溢出问题。我尝试调整窗口大小，看看是否达到您想要的效果。

body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
    background-color: #A9A9A9;
}

.wrapper div{
    width:100%;
    height:100%;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.pic2 {
    display: flex;
    flex-direction: column;
}

button {
    flex: 1;
    height:30%;
    background: green;
}

img {
    flex : 1;
    max-height: 100%;
}

.custom-img{
    display:block;
    max-height:70%;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div2</div>
        <div class="pic2">
                <button>Div2</button>
                <div class="custom-img">
                    <img src="https://i.imgur.com/VHtXwib.jpg">
                </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>

Answer 2

在CSS应用min-height: 40px max-height：100％时，您已经设置了按钮img，实际上是在获得父项大小，而不是将按钮减小40px。

您可以设置max-height: calc(100% - 40px);，它将应用父按钮的100％高度减去按钮的40px。

body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template: repeat(2, 50vh) / repeat(3, 1fr);
  background-color: #A9A9A9;
}

.wrapper>div:nth-child(even) {
  background-color: #D3D3D3;
}

.pic2 {
  display: flex;
  flex-direction: column;
}

button {
  flex: 1;
  min-height: 40px;
  background: green;
}

img {
  flex: 1;
  max-height: calc(100% - 40px);
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">
    <div class="pic1">Div2</div>
    <div class="pic2">
      <button>Div2</button>
      <img src="https://i.imgur.com/VHtXwib.jpg">
    </div>
    <div class="pic3">Div3</div>
    <div class="pic4">Div4</div>
    <div class="pic5">Div5</div>
    <div class="pic6">Div6</div>
  </div>
</body>

</html>

如何使用flexbox将内容包含在网格中？

2 个答案: