Automatic height of inner div

Question

I have the following code:

<div class="parent">
  <div class="children">
     Headline 
     <div class="children-inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem. Cupiditate autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate autem.
      </div>
  </div>
  <div class="children">
    Headline
    <div class="children-inner">
    There is less content in right column, but the height of the bordered inner div should be automatically equal the height of the higher other inner bordered div.
    </div>
  </div>
</div>

CSS:

.parent {
  padding: 1rem;
  background-color: #52f;
  display: flex;
}

.children {
  width: 50%;
  background-color: red;
  padding: 1rem;
  margin: 1rem;
}

.children-inner {
  width: 100%;
  margin-top: 10px;
  border: 1px solid black;
}

JSFiddle: https://jsfiddle.net/563nw97d/

There is less content in right column, but the height of the bordered inner div should be automatically equal the height of the higher other inner bordered div. How do I achieve this?

`display: flex; flex-direction: column;` on children then `flex:1` on children-inner — Temani Afif, Jan 19 '22 at 12:32
Thank you Temani, this worked. I extended the fiddle to include a further challenge: https://jsfiddle.net/b6ojehc3/ Can you tell me how to align "Read more" at the bottom of the bordered div? — Stefan Deiss, Jan 19 '22 at 12:59

Automatic height of inner div

0 Answers0