Question

因此，我有一个使用flexbox属性创建的日历应用程序...问题是我对该属性没有太多经验，并且无法按预期工作。

因此在此示例中，我有一个页眉，一个带flex: 1的div和一个页脚。

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
}
.container {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.container > div {
    overflow: scroll;
    height: 120px;
    padding: 10px;
}
header, footer {
    background: darkslateblue;
    color: white;
    padding: 20px;
}

    <header>lol</header>

    <div class="container">
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
    </div>

    <footer>foo bar</footer>

我希望中间的div能够跨越页面的所有空间，除了页眉和页脚（如flex: 1属性所期望的那样。

但是...

我还希望孩子div具有overflow-y: auto，并且不要将高度超出边界。因此，div的高度应等于父div的高度除以div的数量，而无需我将值硬编码为子div的高度。

Answer 1

您需要增加高度并溢出到主体，然后再溢出到中间容器。

明智的做法是将最小高度设置为主体或在小屏幕上将其删除。

flex可以被吸食。

<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="search" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form action="search.php" method="POST">
            <input type="text" id="query "name="query" />
            <input type="submit" value="Search" />
        </form>
      </div>
    </div>
  </div>
</div>  
...

//search.php
<?php
    require 'connect.php';
    $query = $_GET['query'];        
        $raw_results = mysqli_query("SELECT * FROM chauffeurs
            WHERE (`nom` LIKE '%".$query."%') OR (`text` LIKE '%".$query."%')") ;

        if(mysqli_num_rows($raw_results) > 0){
            $results = mysqli_fetch_array($raw_results);
            echo $results;   
        }else{
                echo "<h1>NOTHING FOUND</h1>";
        }
?>

<?php  $bdd = new PDO('mysql:host=localhost; dbname=feuille_de_route','root','');
 ?>

如何在display：flex元素内设置div溢出属性

1 个答案: