Content in flex container and item overflows in one container/item but not the other

Question

I have a setup with nested flex containers and flex items. Schematically looks like

ovdPanel (container:column-nowrap) 
  ovdPanelContainer (container:row-nowrap item:1 1 100%)
    ovdPanelContentItem (container:column-nowrap item:1 1 100%)
      ovdPanelContentItem__item (item:1 1 auto) 
    ovdPanelContentItem (container:column-nowrap item:1 1 100%)
      ovdPanelContentItem__item (item:1 1 auto) 

The first ovdPanelContentItem_item does contains another flex-box based table, the second a similar table with one column (intended to be used as a SELECT replacement).

When making the browsers width smaller, the second ovdPanelContentItem behaves as expected. It does not overflow but reduces it's width and in the end shows an ellipsis if the text does not fit anymore. This does not happen in the left ovdPanelContentItem. Here the content (columns) do get smaller but if it does not with the containers width anymore it overflows. And therefore does only now show the ellipsis.

I have a pen here; https://codepen.io/poundfoolish/pen/QWyGXzg?editors=1100 to make it more clear.

Have tried to apply different justify-content and align-items values on the first (left) ovdPanelContentItem but failed to resolve this. Also do not have a clue why the first ovdPanelContentItem behaves differently then the second.