Div in Flex Does Not Take Flex's Full Height Despite Stretch-CodePudding

I want to create something similar to this:

I'm using flexbox to position the blue rectangle on the left and the text on the right.

The text will be dynamic so it may expand the height of the container if it's longer. Hence, I don't want to hardcode height.

I'm using the code below, relying on the fact that the text will expand the height of the container, and hence when I call height: 100% on the blue rectangle element, it should appear on the left spanning entire height of the parent, but it doesn't.

.container {
  display: flex;
  width: 200px;
  border-style: solid;
  align-content: stretch;
}

.leftRectangle {
  background-color: blue;
  width: 20px;
  height: 100%;
}

.rightRectangle {
  padding: 12px;
}

<div class='container'>
  <div class='leftRectangle'></div>
  <div class='textContent'>Hello World</div>
 </div>

Why is it behaving this way and what are potential workarounds?

CodePudding user response：

Here I leave you a solution for this, although I don't know if you want the blue bar to scroll, let me know and I'll also explain how to scroll

and remove the height property from the CSS in the left Rectangle class and also add the textContent class that contains the paragraph, enter the property and the height value 100%, so that the text does not overflow outside the container

<div >
      <div ></div>
      <div >
        <p>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It
          has roots in a piece of classical Latin literature from 45 BC, making
          it over 2000 years old. Richard McClintock, a Latin professor at
          Hampden-Sydney College in Virginia, looked up one of the more obscure
          Latin words, consectetur, from a Lorem Ipsum passage, and going
          through the cites of the word in classical literature, discovered the
          undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
          1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
          Evil) by Cicero, written in 45 BC. This book is a treatise on the
          theory of ethics, very popular during the Renaissance. The first line
          of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
          section 1.10.32. The standard chunk of Lorem Ipsum used since the
          1500s is reproduced below for those interested. Sections 1.10.32 and
          1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also
          reproduced in their exact original form, accompanied by English
          versions from the 1914 translation by H. Rackham.
        </p>
      </div>
    </div>

and CSS

.container {
  display: flex;
  width: 200px;
  border-style: solid;
}

.leftRectangle {
  background-color: blue;
  width: 20px;
}

.textContent {
  width: 100%;
}

.rightRectangle {
  padding: 12px;
}

CodePudding user response：

The problem is that if parent doesn't have height and child has height: 100%, then the child won't know which height to set. Here is some workaround:

.container {
  display: flex;
  width: 200px;
  border-style: solid;
  align-content: stretch;

  position:relative;
}

.leftRectangle {
  background-color: blue;
  width: 20px;
  height: 100%;

  position: absolute;
}

.rightRectangle {
  padding: 12px;
}

.textContent {
  padding-left: 20px;
}

<div class='container'>
  <div class='leftRectangle'></div>
  <div class='textContent'>Hello World</div>
 </div>