I have two items inside the stackView, width for both the items(Buttons) depends on the text size with horizontal scroll. In iOS 15.5+ devices its working fine where as in below 15.5 its width stretching for both the items. I have set below stack view properties in Xcode
Alignment - Fill
Distribution - Fill proportionally
spacing - 8
Attaching both the screenshot below
in iOS 15.5 +
Source of the Storyboard(Only storyboard no code at all)
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina6_12" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
<capability name="Named colors" minToolsVersion="9.0"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="HorizontalScroll" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" indicatorStyle="white" translatesAutoresizingMaskIntoConstraints="NO" id="pPz-B2-Rzp">
<rect key="frame" x="9" y="134" width="375" height="28"/>
<subviews>
<stackView contentMode="scaleAspectFill" distribution="fillProportionally" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="38d-tZ-Ob8">
<rect key="frame" x="8" y="0.0" width="551" height="28"/>
<subviews>
<button opaque="NO" contentMode="scaleAspectFit" contentHorizontalAlignment="leading" contentVerticalAlignment="fill" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="9yA-Gf-ewo">
<rect key="frame" x="8" y="0.0" width="157.33333333333334" height="28"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" image="square.and.arrow.up.fill" catalog="system" imagePlacement="leading" title="Left not as right" imagePadding="10">
<fontDescription key="titleFontDescription" name="FidelitySans-Regular" family="Fidelity Sans" pointSize="14"/>
</buttonConfiguration>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="15"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="center" semanticContentAttribute="forceRightToLeft" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hg7-VQ-pG3">
<rect key="frame" x="173.33333333333334" y="0.0" width="369.66666666666663" height="28"/>
<color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="10" maxY="0.0"/>
<state key="normal" title="Button" image="header_down_arrow_active"/>
<buttonConfiguration key="configuration" style="plain" image="rectangle.portrait.and.arrow.forward.fill" catalog="system" title="Right Button width is dynamic based on the title" imagePadding="10">
<fontDescription key="titleFontDescription" name="FidelitySans-Regular" family="Fidelity Sans" pointSize="14"/>
</buttonConfiguration>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="15"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="width" relation="greaterThanOrEqual" constant="300" id="bBu-9U-0sf"/>
</constraints>
<edgeInsets key="layoutMargins" top="0.0" left="8" bottom="0.0" right="8"/>
</stackView>
</subviews>
<color key="backgroundColor" name="hlo-white"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="38d-tZ-Ob8" secondAttribute="bottom" id="DzN-fS-Ej7"/>
<constraint firstAttribute="height" constant="28" id="EvL-B8-0B9"/>
<constraint firstItem="38d-tZ-Ob8" firstAttribute="leading" secondItem="pPz-B2-Rzp" secondAttribute="leading" constant="8" id="eJW-wz-W4i"/>
<constraint firstItem="38d-tZ-Ob8" firstAttribute="top" secondItem="pPz-B2-Rzp" secondAttribute="top" id="qSq-Ub-rYd"/>
<constraint firstAttribute="trailing" secondItem="38d-tZ-Ob8" secondAttribute="trailing" id="uve-dX-nuu"/>
<constraint firstItem="38d-tZ-Ob8" firstAttribute="centerY" secondItem="pPz-B2-Rzp" secondAttribute="centerY" id="w5w-1X-may"/>
</constraints>
</scrollView>
</subviews>
<viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="pPz-B2-Rzp" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" constant="9" id="jpM-Ag-u78"/>
<constraint firstItem="pPz-B2-Rzp" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" constant="75" id="kx9-AK-3lD"/>
<constraint firstItem="pPz-B2-Rzp" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="nTS-yX-v1j"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-108" y="4"/>
</scene>
</scenes>
<resources>
<image name="header_down_arrow_active" width="20" height="11"/>
<image name="rectangle.portrait.and.arrow.forward.fill" catalog="system" width="128" height="108"/>
<image name="square.and.arrow.up.fill" catalog="system" width="115" height="128"/>
<namedColor name="hlo-white">
<color red="0.32899999618530273" green="0.32400000095367432" blue="0.4779999852180481" alpha="0.33000001311302185" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
Apple has made a number of changes over the years in an attempt to make UI elements "more readable" and to make layouts "more uniform."
Here (and I've seen this in other situations), it appears UIKit sizes the buttons in unexpected ways.
You can fix this specific issue by Requiring both Content Hugging and Content Compression Resistance on both buttons: