Why borderBoxSize of ResizeObserver is a Array

January 17, 2022

When i Use ResizeObserver i Create a ObserverCallBack like

public handleCallBack: ResizeObserverCallback = entries => {
    entries.forEach(entry => {
    // get new size
    const newWidth = entry.borderBoxSize.inlineSize
    })
}

But the type of borderBoxSize is ReadonlyArray of ResizeObserverSize

I should change my code to be borderBoxSize[0]

I’m very curious why borderBoxSize need to be an Array, and when it’s length will be larger then 1

>Solution :

According to the note at https://drafts.csswg.org/resize-observer/#dom-resizeobserverentry-borderboxsize it can’t happen yet, but will in a future version of the specs:

The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments, which occur in multi-column scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.