CODEWITHSUNDEEP
cssflexboxcss-grid
HumansAreDead
HumansAreDead

Reputation: 69

How do I use flexbox to contain the contents inside a grid?

I want using flexbox to contain everything within the second div of the grid. In this case the picture overflows and I don't know why. I would like it to be resized by height and maintain aspect ratio.

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>

Upvotes: 0

Views: 393

Answers (2)

MatrixTXT
MatrixTXT

Reputation: 2502

You cannot set min-height for the button in terms you must use div. Unless it will cause strange overflow problem when you resize the picture. Take I try to resize the window, see if this the effect you want.

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>

Upvotes: 1

caiovisk
caiovisk

Reputation: 3809

As you have set your button min-height: 40px when CSS applies the img max-height:100% it is actually getting the parent size, not decreasing the button 40px.

You can set max-height: calc(100% - 40px);, which will apply the parent 100% height minus 40px of the button.

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>

Upvotes: 0

Related Questions