0

I'm trying to create a row of widgets (what they are is irrelevant), each one in a fixed-width column. The first of these widgets is a collapsible image which is controlled by a button. The button will live in the same column as the image, and should be below it.

I can't seem to get the image to fit into the height of the parent element unless I use height:100%; in which case it pushes the button out. How can I resolve this issue?

Note: I use flexbox pretty heavily in this example, but you can remove that, there's no reason for it. The current code is not fixed-width, but it should be.

function hideShow() {
  document.getElementById('hideme').classList.toggle('hide');
}
.hide {
  display: none;
}

main {
  height: 100px;
  background-color:rgba(0,255,0,50);
  display:flex;
}

main > div:first-child {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#container > div:first-child > img {
  height:100%;
  /* Some code I can't figure out */
}
<main>
  <div id="container">
    <div>
      <img id="hideme" src="https://placehold.it/200x200">
    </div>
    <button onclick="hideShow()">Show Image</button>
  </div>
  <button>Oh, and some</button>
  <input value="other stuff">
 </main>
Asons
  • 84,923
  • 12
  • 110
  • 165
thesecretmaster
  • 1,950
  • 1
  • 27
  • 39
  • In your case `main > div:first-child div { min-height: 0; } ` will prove the dupe links explanation – Asons Mar 23 '19 at 17:15
  • Ah, that's an interesting thing to know. I had no idea flex included min-width/height defaults. The only problem I have now is making the width match the height, but that shouldn't be too hard. Thanks! – thesecretmaster Mar 23 '19 at 17:21

0 Answers0