Обнаруживать, если дочерние divs шире родительского?

Question

Как определить, если несколько дочерних divs больше, чем их родитель? В этом случае, когда они шире, самый правый из них отображается ниже самого левого. Я попытался использовать js для проверки переполнения (как описано здесь: javascript css check if overflow), но он не работает.

В конечном счете, я хочу оставить самый правый div ниже своего родного брата и изменить его обивку, но только когда они будут шире.

Код в основном это:

<div class='parent'> 
    <span>title</span><br /> 
    <div class='child'> 
    Some content. 
    </div> 
    <div class='child'> 
    More content that sometimes doesn't fit. 
    </div> 
</div> 

Answer 1

Это будет сравнить ширину ребенка и родительской ширину ваших див

$('.parent').children('.child').each(function() { 
 
    let $this = $(this); 
 
    console.log($this.width(), ' ', $('.parent').width()); 
 
    if ($this.width() > $('.parent').width()) { 
 
    //add the padding you want 
 
    $this.css('padding-top', '10px'); 
 
    } 
 
})

.parent { 
 
    width: 500px; 
 
} 
 
.child { 
 
    background-color: green; 
 
    width: 700px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class='parent'> 
 
    <span>title</span> 
 
    <br /> 
 
    <div class='child'> 
 
    Some content. 
 
    </div> 
 
    <div class='child'> 
 
    More content that sometimes doesn't fit. 
 
    </div> 
 
</div>

Answer 2

не уверен, но вы пробовали это?

var children = YourParentDiv.children; 
    for (var i = 0; i < children.length; i++) { 
     var child_width=children[i].offsetWidth; 
     var parent_width = children[i].parentElement.offsetWidth; 
     if (child_width>parent_width) 
     {console.log('wider');} 
    }