Как я могу получить ширину div, который имеет свойство flex Grow от javascript?

Question

Я хотел бы получить ширину элемента div, рассмотрим имя класса ab c, к этому элементу применяется свойство flex grow. я хотел получить ширину этого div после увеличения div и применить ту же ширину к другому div с именем класса как abc2. заранее спасибо!

//i tried this thing
var y = document.getElementsByClassName('abc');
var width=y[0].offsetWidth;
var x = document.getElementsByClassName('abc2');
x[0].style.width = width+'px';

// im not getting the same width as .abc for .abc2



    

.parent1, .parent2{
 display: flex;
 }
 .abc{
  flex: 1;
    flex-grow: 1;
    display: inline-block;
    width: 10vw;
    height: 10vh;
    padding: 10px;
    background-color: #ffd3b6;
    margin: 3px;
    text-align: center;
    }
.abc2{
    background-color: #ffd3b6;
    height: 10vh;
    padding: 10px;
    
    text-align: center;
    }
 .other{
    background-color: #ffd3b6;
    height: 10vh;
    padding: 10px;
    margin: 3px;
    text-align: center;
    width:50px;
    }

<div class="parent1">
  <div class="abc">i want this expanded width</div>
  <div class="abc">i want this expanded width</div>
</div>
<div class="parent2">
  <div class="abc2">i want to get same width as div of abc</div>
  <div class="other">  random</div>
  <div class="other">  random</div>
</div>

Answer 1

Если вы установите для abc2 значение padding: 10px 0px;, тогда ширина будет правильной.

В основном ваши вычисления не учитывают заполнение.

//i tried this thing
var y = document.getElementsByClassName('abc');
var width=y[0].offsetWidth;
var x = document.getElementsByClassName('abc2');
x[0].style.width = width+'px';

// im not getting the same width as .abc for .abc2

.parent1, .parent2{
 display: flex;
 }
 .abc{
  flex: 1;
    flex-grow: 1;
    display: inline-block;
    width: 10vw;
    height: 10vh;
    padding: 10px;
    background-color: #ffd3b6;
    margin: 3px;
    text-align: center;
    }
.abc2{
    background-color: #ffd3b6;
    height: 10vh;
    padding: 10px 0px;
    
    text-align: center;
    }
 .other{
    background-color: #ffd3b6;
    height: 10vh;
    padding: 10px;
    margin: 3px;
    text-align: center;
    width:50px;
    }

<div class="parent1">
  <div class="abc">i want this expanded width</div>
  <div class="abc">i want this expanded width</div>
</div>
<div class="parent2">
  <div class="abc2">i want to get same width as div of abc</div>
  <div class="other">  random</div>
  <div class="other">  random</div>
</div>