文本和按钮延伸到父容器之外

Question

我在 chat_bubble 父 div 中有一些文本和按钮。如果文本太多，或者屏幕太小，文本和按钮会延伸到父容器之外。

我需要 btn-grid 具有问题容器 20% 的固定高度，并让问题文本填充剩余空间。我需要做什么？

这是一个代码笔：

https://codepen.io/TheNomadicAspie/pen/JjWVbKJ

这是我的 CSS：

*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Benne', serif;
    font-size: 10vh;
    color: black;
    line-height: 1.25;
}

:root {
    --hue-neutral: 200;
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.container {
    width: 90%;
    height: 90%;
    border-radius: 5px;
    padding: 10px;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
    margin: 20px 0;
    height: 20%;
}

.btn {
    background-color: purple;
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
    font-family: 'Fjalla One', sans-serif;
    font-size: 5vh;
}

.btn:hover {
    border-color: black;
}

.start-btn, .next-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hide {
    display: none;
}

#main {
    width: 90%;
    height: 90%;
    overflow: hidden;
}
#chat_bubble    {
    width: 70%;
    height: 70%;
    background: ghostwhite !important;
    float: left;
}

#character_image  {
    max-height: 30vh;
    object-fit: cover;
    background: #ffffff;
    float: right;
    overflow: visible;
}

#question-text {
    object-fit: cover;
    overflow: visible;
}

Answer 1

如果我理解正确，您希望 #question 文本能够响应并适合其父容器，无论问题文本的数量如何。您可以在clamp() 的帮助下实现“响应式文本”又名fluid typography，它基本上“钳制”了一个介于下限和上限之间的值。它有很好的支持，或者如果你不想使用clamp()，你可以使用relative length unit，比如vw，并引入断点来调整小屏幕上的字体大小。

现在.btn-grid 在#question-container 内占据固定的 20% 高度，问题文本填充父容器中的剩余空间。无论有多少文本，#question-container 的高度都会随着视口以响应方式变化而增加/减小。

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')

startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')

questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'

const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes)

*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Benne', serif;
    font-size: 10vh;
    font-size: 16px;
    color: black;
    line-height: 1.25;
}

:root {
    --hue-neutral: 200;
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: black;
}

#question {
    font-size: 16px; /* fallback */
    font-size: clamp(1em, 5vw, 10vh);
}

.container {
    width: 90%;
    height: 90%;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
    margin: 20px 0;
    height: 20%;
}

.btn {
    background-color: purple;
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
    font-family: 'Fjalla One', sans-serif;
    font-size: 5vh;
}

.btn:hover {
    border-color: black;
}

.start-btn, .next-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hide {
    display: none;
}

#main {
    width: 90%;
    height: 90%;
    overflow: hidden;
}
#chat_bubble    {
    width: 70%;
    height: 70%;
    background: ghostwhite !important;
    float: left;
}

#character_image  {
    max-height: 30vh;
    object-fit: cover;
    background: #ffffff;
    float: right;
    overflow: visible;
}

#question-text {
    height:50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test title</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Benne&family=Fjalla+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
    <div id="chat_bubble" class="container">
        <div id="email-container" class="hide">
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email">
            <button id="submit-email-btn" class="btn">Submit</button>
        </div>
        <div id="question-container" class="hide">
            <div id="question" class="question-text">Question</div>
            <div id="answer-buttons" class="btn-grid">
            </div>
        </div>
        <div id="chart" class="hide"></div>
        <div class="controls">
            <button id="start-btn" class="start-btn btn">Start</button>
        </div>
    </div>
    <div id="character_image">
        <img src="http://media.pixcove.com/C/0/9/Stick-Figure-Figure-Stick-Free-Vector-Graphics-Fre-0800.jpg" alt=""/>
    </div>

</div>


<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>