Flexbox Half Side Layout, Left Side Image Fixed

How I can split screen half and left side is image fixed (like navbars if you scroll they are still left and isn't scrollable) Im using flexbox to split screen to half but there is

Solution 1:

Start with setting the container to 100vh instead of 100%.

Setting the width of the 2 sides can be achieved with the third value in the flex property (flex-basis):

flex: 0050%;

The scrolling right column can be achieved with overflow-y.

.fo-container {
  display: flex;
  height: 100vh;
}

.left-half {
  background-image: url("https://picsum.photos/200/300"); /* change back to whatever background image you want */background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0050%; /* flex-basis: 50% */
}

.right-half {
  flex: 0050%; /* flex-basis: 50% */background-color: white;
  padding: 1rem;
  box-sizing: border-box; /* make sure 50% is still 50% after you add padding */overflow-y: auto; /* scrollability here */
}

<divclass="fo-container"><divclass="left-half"></div><divclass="right-half"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a erat non dolor auctor tempus vitae vitae metus. Praesent at aliquam sapien, sed lacinia ex. Quisque sed sem non mi malesuada consectetur. Quisque id venenatis massa. Curabitur hendrerit libero eget vehicula tincidunt. Proin ipsum risus, rhoncus eget nibh id, imperdiet euismod risus. Sed tempor quam quis pellentesque posuere. Ut non risus laoreet, iaculis nunc sit amet, gravida turpis. Curabitur eu risus ac tellus ultrices eleifend. In blandit dui sit amet leo lacinia tincidunt. Pellentesque pellentesque elementum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p><p>Mauris id efficitur mauris. Integer ultrices sapien in placerat malesuada. Nunc lacinia cursus consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur fringilla dignissim convallis. Mauris mattis et risus sit amet convallis. Sed condimentum pellentesque orci vitae molestie.</p><p>Vestibulum maximus sed lectus ut sodales. Donec sit amet sodales enim. Mauris non velit eleifend, sagittis arcu ut, ultrices lectus. Suspendisse potenti. Morbi gravida odio in justo bibendum ullamcorper. Nam at purus ligula. Nulla ornare orci vel vestibulum aliquet.</p></div></div>