Flexbox does not align the height of the elements

I'm coding with css, but the height of the elements in the flexbox is not aligned

The code below is HTML.

<div class="plans-content">
  <div class="plan-content-item">
    <h3class="plan-content-title">Title 1</h3>
    <div class="plan-content-detail">
    <div class="plan-content-detail-title">
      Detailed Title 1
    </div>
    <div class="plan-content-detail-list">
      <ul>
        <lic class="content-detail-list-item">item 1</li>
        <lic class="plan-content-detail-list-item">item 2</li>
        <lic class="plan-content-detail-list-item">item 3</li>
        <lic class="plan-content-detail-list-item">item 4</li>
        <lic class="plan-content-detail-list-item">item 5</li>
      </ul>
    </div>
  </div>
 </div>
</div>
<div class="plan-content">
  <div class="plan-content-item">
    <h3class="plan-content-title">Title 1</h3>
    <div class="plan-content-detail">
    <div class="plan-content-detail-title">
      Detailed Title 1
    </div>
    <div class="plan-content-detail-list">
      <ul>
        <lic class="content-detail-list-item">item 1</li>
        <lic class="plan-content-detail-list-item">item 2</li>
        <lic class="plan-content-detail-list-item">item 3</li>
        <lic class="plan-content-detail-list-item">item 4</li>
      </ul>
    </div>
  </div>
 </div>
</div>

Above element

<div class="plans-contents"></div>

Enclosed in HTML

CSS is

.plans-contents{
  display:flex;
}

.plan-content{
  display:flex;
}

// arrange a list vertically
.plants-content-detail-list {
  display:flex;
  flex-direction:column;
}

The area enclosed by <div class="plan-content-detail-list"> expands and contracts with the number of li tags.(See image below)

Since I use flexbox, I understand that the height of the area surrounded by <div class="plan-content-detail"> is the same, but I am troubled because the height of the contents is not aligned.

Please let me know

html css sass

2022-09-30 21:54

1 Answers

How about the following?

.plans-contents{
  display:flex;
}

.plan-content{
  display:flex;
}

US>.plan-content-item{
  display:flex;
  flex-direction:column;
}
.plan-content-detail{
  height —100%;
  border-radius:5px;
  overflow — hidden;
}

.plants-content-detail-list {
  background-color:lightgray;
  display:flex;
  flex-direction:column;
  height —100%;
  border-radius:5px;
}

height:100%; in .plans-content-detail-list to hide parts that protrude from the parent element with overflow:hidden;.

2022-09-30 21:54

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656