Flexbox 不包装内容

Question

我使用有序列表 (ol) 作为这个 flexbox 布局的基础。但是包装一下子就不配合了。也许 squarespace 已经弄乱了有序列表的默认属性。无论哪种方式，文本都拒绝在 ol li ol li 元素中换行，它看起来像这样：

这是我正在使用的 CSS：

.ProductItem-details-excerpt ol {list-style:none; 
    padding-left:0vw; padding-right:0vw; padding-bottom:0vw !important; 
    background-color:white; text-align-last:center;
    margin-left:1.85vw !important; margin-right:1.85vw !important; 
    display: flex;  flex-wrap: wrap; justify-content: space-between; 
    border-radius:15px;}

.ProductItem-details-excerpt ol li {
    flex-grow: 1; 
    white-space: nowrap; 
    font-size:.8em; 
    display:inline-block; 
    position:relative !important; 
    margin:1px; 
    border:0px solid #dedede; padding:.3vw; padding-right:.6vw; padding-left:.6vw; text-align:center; background-color:#f0f0f0;}

.ProductItem-details-excerpt ol li ol{
    margin-top:.2vw !important; margin-right:-.6vw !important; margin-left:-.6vw !important; margin-bottom:-.3vw !important; 
    border-radius:0px !important; display: flex; flex-wrap: wrap !important; }


.ProductItem-details-excerpt ol li ol li{font-size:.9em !important; max-width:100%;}

如何让文本和 flexbox 子项正确换行？

这是 HTML。我无法控制它，因为它是方形空间：

<ol data-rte-list="default">
<li><p class=""><strong>PICTURE</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>Display Type</strong></p><p class="">Real 4K Display</p></li>
        <li><p class=""><strong>Display Resolution</strong></p><p class="">4K Ultra HD (3840 x 2160)</p></li>
        <li><p class=""><strong>Backlight Type</strong></p><p class="">Direct</p></li>
        <li><p class=""><strong>Picture Processor</strong></p><p class="">Quad Core Processor 4K</p></li>
        <li><p class=""><strong>Refresh Rate</strong></p><p class="">TruMotion 120 (Native 60Hz)</p></li>
        <li><p class=""><strong>High Dynamic Range</strong></p><p class="">Active HDR (HDR10, HLG), HDR Dynamic Tone Mapping</p></li>
        <li><p class=""><strong>Clarity</strong></p><p class="">Double Step Noise Reduction, Sharpness Enhancer</p></li>
        <li><p class=""><strong>Color</strong></p><p class="">Advanced Color Enhancer, True Color Accurary</p></li>
        <li><p class=""><strong>Resolution Upscaler</strong></p><p class="">4K Upscaler</p></li>
    </ol></li>

<li><p class=""><strong>GAMING</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>Auto Low Latency Mode</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>HgiG</strong></p><p class="">Yes</p></li>
        </ol></li>
<li><p class=""><strong>AI TV</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>LG ThinQ® AI</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>Google</strong></p><p class="">Google Assistant Built-in "Works with" Google Assistant</p></li>
        <li><p class=""><strong>Alexa</strong></p><p class="">Alexa Built-in "Works with" Alexa</p></li>
        <li><p class=""><strong>Apple</strong></p><p class="">Apple Airplay 2, Apple Homekit</p></li>
        <li><p class=""><strong>Intelligent Voice Recognition</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>Home Dashboard</strong></p><p class="">Yes</p></li>
    </ol></li>
<li><p class=""><strong>SMART TV</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>Operating System</strong></p><p class="">webOS</p></li>
        <li><p class=""><strong>Magic Remote Control</strong></p><p class="">Yes (Point, Click, Scroll, Voice)</p></li>
        <li><p class=""><strong>Universal Remote Control</strong></p><p class="">Yes (Auto Device Detection)</p></li>
        <li><p class=""><strong>LG Channels</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>LG Content Store (App Store)</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>Full Web Browser</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>Sports Alert</strong></p><p class="">Yes</p></li>
    </ol></li>
<li><p class=""><strong>AUDIO</strong></p>
    <ol data-rte-list="default">
    <li><p class=""><strong>Speaker System</strong></p><p class="">2.0 Channel</p></li>
    <li><p class=""><strong>Output Power</strong></p><p class="">20W</p></li>
    <li><p class=""><strong>Speaker Direction</strong></p><p class="">Down Firing</p></li>
    <li><p class=""><strong>AI Sound Pro / AI Sound</strong></p><p class="">AI Sound</p></li>
    <li><p class=""><strong>Surround Mode</strong></p><p class="">Ultra Surround</p></li>
    <li><p class=""><strong>Audio Codec</strong></p><p class="">AC4, AC3 (Dolby Digital), EAC3, HE-AAC, AAC, MP2, MP3, PCM, WMA, apt-X (refer to manual)</p></li>
    <li><p class=""><strong>Bluetooth Surround Ready</strong></p><p class="">Yes</p></li>
    <li><p class=""><strong>LG Sound Sync</strong></p><p class="">Yes</p></li>
    </ol></li>
<li><p class=""><strong>POWER</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>Power Supply</strong></p><p class="">AC 120V, 50/60Hz</p></li>
        <li><p class=""><strong>Standby Power Consumption</strong></p><p class="">Under 0.5W</p></li>
    </ol></li>
<li><p class=""><strong>DIMENSIONS</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>Dimensions w/ Stand</strong></p><p class="">49"W x 30.8"H x 9.3"D</p></li>
        <li><p class=""><strong>Dimensions w/o Stand</strong></p><p class="">49"W x 28.6"H x 3.4"D</p></li>
        <li><p class=""><strong>Box Dimensions</strong></p><p class="">55.9"W x 32.9"H x 7.5"D</p></li>
        <li><p class=""><strong>Stand Width</strong></p><p class="">44.4"</p></li>
        <li><p class=""><strong>TV Weight w/ Stand</strong></p><p class="">31.7 lbs</p></li>
        <li><p class=""><strong>TV Weight w/o Stand</strong></p><p class="">31.5 lbs</p></li>
        <li><p class=""><strong>Packaging Weight</strong></p><p class="">43.7 lbs</p></li>
        <li><p class=""><strong>VESA Mounting</strong></p><p class="">300 x 300</p></li>
    </ol></li>
<li><p class=""><strong>CONNECTIVITY</strong></p>
    <ol data-rte-list="default">
        <li><p class=""><strong>Wi-Fi® Standard</strong></p><p class="">Wi-Fi Certified 802.11ac</p></li>
        <li><p class=""><strong>Bluetooth® Support</strong></p><p class="">Version 5.0</p></li>
        <li><p class=""><strong>IP Control</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>HDMI-CEC (Simplink)</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>TV Tuner</strong></p><p class="">ATSC, Clear QAM</p></li>
        <li><p class=""><strong>Smart Phone Connectivity</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>HDMI</strong></p><p class="">3</p></li>
        <li><p class=""><strong>HDMI Audio Return Channel</strong></p><p class="">Yes</p></li>
        <li><p class=""><strong>USB 2.0</strong></p><p class="">2</p></li>
        <li><p class=""><strong>RF Connection In</strong></p><p class="">1</p></li>
        <li><p class=""><strong>Composite In</strong></p><p class="">1</p></li>
        <li><p class=""><strong>Ethernet In</strong></p><p class="">1</p></li>
        <li><p class=""><strong>Digital Audio Output (Optical)</strong></p><p class="">1</p></li>
    </ol></li>
</ol>

Answer 1

好吧，原来 li 元素中的段落标签被设置为 whitespace:nowrap。我把它改成了正常的，这似乎解决了这个问题。