css Question posted in
Some basic documentation can be found here.

Css – Why won't my flexbox child expand to full height?

So I have the following mark-up:

<div class="box">
  <div class="image" style="background-image: url('<url>')"></div>
  <div class="content">
    <p>This is some content</p>
    <p>This is some more content</p>
  </div>
</div>

css:

.box {
  display: flex;
  flex-direction: row;
}

.image {
  width: 50%;
  height: 100%;
  min-height: 100%
}

.content {
  width: 50%;
}

The issue is that the .image div never expands to full height. The only way I can get it to expand to the full height is if I set the height on the parent .box container.

I don’t want to do this because the content is dynamic. I’ve tried setting a min-height and height and neither seem to work. I’ve also tried using justify-content: stretch; on the container and flex-grow: 1 on the image but nothing is working.

Where am I going wrong?

Tags:

2

Answers


  1. 0

    In a quick matter of fixing the issue, you might want to add the "img" tag to your html instead of adding "background-image" to a "div".

    .box {
    display: flex;
    flex-direction: row;
}

.image {
    width: auto;
    height: 100%;
}

.content {
    width: 50%;
}
    <!DOCTYPE html>
<html>

<body>
    <div class="box">
        <div class="image">
            <img src="https://via.placeholder.com/150" alt="placeholder image">
        </div>
        <div class="content">
            <p>This is some content</p>
            <p>This is some more content</p>
        </div>
    </div>
</body>

</html>

    Hope it helps you.

    Login or Signup to reply.
  2. 0

    Normally, the trick lies in setting a known height at some point in the hierarchy.

    Assuming the DIV with class "box" marks the beginning of the document, and assuming that what you want is to give a "full screen" experience with 2 panes, the fix is probably just height: 100vh;:

    .box {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

    Because flex children are stretched by default, this should make both DIV’s (image and content) occupy the entire screen’s height.

    If the "box" DIV is not the right one (for example, maybe there’s stuff above it like a navbar), then the trick is still valid but gets more complex. It involves setting the 100vh height to an element that doesn’t disfigure your layout (could even be the body element), and then using flex’es with column direction + one flex element that grows to fill the entire space.

    Actually, as I write this, I have a demo (unrelated to your problem, but the source shows how to do this): Svelte WjDataView.

    In this demo page, you can see how the data view component (the table) always occupies "the rest" of the vertical real estate.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search