In an elastic layout, the width of the parent element is not fixed, how to ensure that the child element scrolls horizontally without supporting the parent element?

using flexible layout, I originally intended to make the following page. The width of the right box div2 is the rest of the screen width, and the ul has a lot of li , which can be scrolled horizontally.

html

The width of

div2 has been stretched out, and the width of the browser screen has been enlarged.

is there any way to ensure a single screen and allow child elements to scroll horizontally?

Html css flex scroll

Mar.02,2021

div2 plus overflow:scroll is fine. Normally, the width of div2 should be equal to the width of ul 2000, and the extra 40 should be the margin of ul.

Previous: How does vue use v-model to bind the value of a parent component within a child component?

Next: ES6 class inheritance problem

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b373eb-2c088.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b373eb-2c088.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?