CODEWITHSUNDEEP
htmlcssflexbox
dragonmnl
dragonmnl

Reputation: 15538

Why is flexbox's first child taking more space than its own content?

.w {
  width: 10rem;
  border: 1px red solid;
}

.c {
  display: flex;
  flex-direction: row;
  /*align-items: flex-start;*/
  align-items: stretch;
}

.v {
    /*align-self: flex-start;*/
    position: relative;
    width: 100%;
    overflow: hidden;
    background: blue;
}

.t {
  width: 5rem;
  height: 5rem;
  background: yellow;
}
<div class="w">
  <div class="c">
    <div class="v">
        <div class="t"></div>
    </div>
    <div class="d">
      <div>el1</div>
      <div>el2</div>
      <div>el3</div>
    </div>   
  </div>
</div>

How to ensure div.v takes exactly the same amount of space as div.t (which has a set size), while leaving div.d grow based on its content?

The current result is as follows:

actual result

Expected result: (edited)

enter image description here

https://codepen.io/manuWebFE/pen/poPMLze

Upvotes: 0

Views: 326

Answers (1)

Neetigya Chahar
Neetigya Chahar

Reputation: 693

Remove widht: 100% from .v class

.w {
  width: 10rem;
  border: 1px red solid;
}

.c {
  display: flex;
  flex-direction: row;
  /*align-items: flex-start;*/
  align-items: stretch;
}

.v {
    /*align-self: flex-start;*/
    position: relative;
    overflow: hidden;
    background: blue;
}

.t {
  width: 3rem;
  height: 5rem;
  background: yellow;
}
<div class="w">
  <div class="c">
    <div class="v">
        <div class="t"></div>
    </div>
    <div class="d">
      <div>el1</div>
      <div>el2</div>
      <div>el3</div>
    </div>   
  </div>
</div>

Upvotes: 1

Related Questions