如何使内联块继承高度？

Question

how can I make article title p element have the same height as the snippet div? Both p and div are inline-block elements.

I tried height: inherit for p , but it doesn't work because li doesn't have explicit height values. Any idea??

const dataRow = dataArray.map(row => {
  return (
    <li key={row.title}>
      <p className="title col-md-2">{row.title}</p>
      <div className="content__div col-md-10">
        <a href={row.link} className="content">{row.content}</a>
      </div>
    </li>
  );
});


ul {
  li {
    list-style-type: none;
  }

  .title {
    display: inline-block;
    background: $title-bg;
    color: $content-bg;
    height: inherit;
    margin: 0;
    text-align: right;
    vertical-align: middle;
  }

  .content__div {
    display: inline-block;
    margin: 1px 0 1px 0;
    padding: 0;
  }

  .content {
    display: inline-block;
    background: $content-bg;
    color: $title-bg;
    text-decoration: none;
    padding: 10px 15px 10px 15px;
  }
}

Answer 1

Add this to ur stylesheet

li {
 display:flex
}

Display flex on the parent li will automatically stretch(match) its children height to the tallest element

Answer 2

You can use flex on the li element to make the p fill the height.

li {
 display: flex;
}

There is will be a size difference visually since you have a margin around the div. Remove that will flush the p and div elements.

.content__div {
 ...
  margin: 0px;
 ...
}

Looks like you may be using bootstrap as a grid. Mixing the inline block and flex will probably not fill the row as you might expect. If you don.t want to change the structure you can get away with adding flex: 1 to the div.

.content__div {
 ...
  flex: 1;
 ...
}

examples: https://plnkr.co/edit/x9DdxX?p=preview