Wie kann ein Div einen verbleibenden horizontalen Raum füllen?

Ich habe 2 Divs: einen auf der linken Seite und einen auf der rechten Seite meiner Seite. Der auf der linken Seite hat eine feste Breite und ich möchte, dass der auf der rechten Seite den verbleibenden Raum ausfüllt.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Dies scheint zu erreichen, was Sie wollen.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Das Problem, das ich bei Boushleys Antwort gefunden habe, ist, dass wenn die rechte Spalte länger als die linke ist, sie sich nur um die linke wickelt und den gesamten Raum wieder ausfüllt. Dies ist nicht das Verhalten, nach dem ich gesucht habe. Nachdem ich viele 'Lösungen' durchsucht hatte, fand ich ein Tutorial (jetzt ist der Link tot) zum Erstellen von drei Spaltenseiten.

Der Autor bietet drei verschiedene Möglichkeiten an, eine mit fester Breite, eine mit drei variablen Spalten und eine mit festen äußeren Spalten und einer Mitte mit variabler Breite. Viel eleganter und effektiver als andere Beispiele, die ich gefunden habe. Mein Verständnis des CSS-Layouts wurde erheblich verbessert.

Grundsätzlich schweben Sie im obigen einfachen Fall die erste Spalte nach links und geben Sie ihr eine feste Breite. Geben Sie der rechten Spalte dann einen linken Rand, der etwas breiter als die erste Spalte ist. Das ist es. Erledigt. Ala Boushleys Code:

Hier ist eine Demo in Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

Bei Boushleys Beispiel enthält die linke Spalte die andere Spalte rechts. Sobald die linke Spalte endet, füllt die rechte wieder den gesamten Raum aus. Hier wird die rechte Spalte einfach weiter in die Seite ausgerichtet und die linke Spalte nimmt den großen Fettrand ein. Keine Flusswechselwirkungen erforderlich.

Die Lösung stammt aus der Anzeigeeigenschaft.

Grundsätzlich müssen Sie die beiden Divs wie Tabellenzellen verhalten. Anstatt also zu verwenden float:left, müssen Sie display:table-cellbeide Divs verwenden, und für die dynamische Breite müssen Sie width:auto;auch div festlegen . Die beiden Divs sollten mit der display:tableEigenschaft in einen Container mit 100% Breite gestellt werden .

Hier ist die CSS:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Und der HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

WICHTIG: Für Internet Explorer müssen Sie die Eigenschaft float in der dynamischen Breite div angeben, da sonst der Speicherplatz nicht gefüllt wird.

Ich hoffe, dass dies Ihr Problem lösen wird. Wenn Sie möchten, können Sie den vollständigen Artikel, den ich darüber geschrieben habe, in meinem Blog lesen .

Heutzutage sollten Sie die flexboxMethode verwenden (kann an alle Browser mit einem Browserpräfix angepasst werden).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Weitere Informationen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Da dies eine sehr beliebte Frage ist, neige ich dazu, eine nette Lösung mit BFC zu teilen.
Codepen-Beispiel für Folgendes hier .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

In diesem Fall wird das overflow: autoKontextverhalten ausgelöst und das richtige Element wird nur auf die verfügbare verbleibende Breite erweitert. Wenn es .leftverschwindet, wird es natürlich auf die volle Breite erweitert . Ein sehr nützlicher und sauberer Trick für viele UI-Layouts, aber vielleicht schwer zu verstehen, warum es zuerst funktioniert.

Wenn Sie keine Kompatibilität mit älteren Versionen bestimmter Browser benötigen ( z. B. IE 10 8 oder weniger), können Sie die calc()CSS-Funktion verwenden:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

@ Boushleys Antwort war die nächste, es gibt jedoch ein Problem, das nicht angesprochen wurde und auf das hingewiesen wurde. Das rechte Div nimmt die gesamte Breite des Browsers ein. Der Inhalt nimmt die erwartete Breite an. Um dieses Problem besser zu sehen:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Der Inhalt befindet sich an der richtigen Stelle (in Firefox), die Breite ist jedoch falsch. Wenn untergeordnete Elemente die Breite erben (z. B. die Tabelle mit width: 100%), erhalten sie eine Breite, die der des Browsers entspricht, wodurch sie rechts von der Seite überlaufen und eine horizontale Bildlaufleiste (in Firefox) erstellen oder nicht schweben und nach unten gedrückt werden ( in Chrom).

Sie können dies einfach beheben, indem Sie overflow: hiddenzur rechten Spalte hinzufügen . Dies gibt Ihnen die richtige Breite sowohl für den Inhalt als auch für das div. Darüber hinaus erhält die Tabelle die richtige Breite und füllt die verbleibende verfügbare Breite aus.

Ich habe einige der anderen oben genannten Lösungen ausprobiert, sie funktionierten bei bestimmten Randfällen nicht vollständig und waren einfach zu kompliziert, um eine Behebung zu rechtfertigen. Das funktioniert und ist einfach.

Wenn es Probleme oder Bedenken gibt, können Sie diese gerne ansprechen.

Hier ist eine kleine Korrektur für die akzeptierte Lösung, die verhindert, dass die rechte Spalte unter die linke Spalte fällt. Ersetzt width: 100%;durch overflow: hidden;eine knifflige Lösung, wenn jemand es nicht wusste.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[Bearbeiten] Überprüfen Sie auch ein Beispiel für das dreispaltige Layout: http://jsfiddle.net/MHeqG/3148/

Wenn Sie versuchen, den verbleibenden Platz in einer Flexbox zwischen zwei Elementen zu füllen, fügen Sie die folgende Klasse zu einem leeren Div zwischen den beiden Elementen hinzu, die Sie trennen möchten:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

Verwenden display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

Boushleys Antwort scheint der beste Weg zu sein, um dies mit Schwimmern zu arrangieren. Es ist jedoch nicht ohne Probleme. Verschachteltes Floating innerhalb des erweiterten Elements steht Ihnen nicht zur Verfügung. es wird die Seite brechen.

Die gezeigte Methode "fälscht es", wenn es um das expandierende Element geht - es schwebt nicht wirklich, es spielt nur mit den schwebenden Elementen mit fester Breite zusammen, indem es seine Ränder verwendet.

Das Problem ist dann genau das: Das expandierende Element wird nicht schwebend. Wenn Sie versuchen, ein verschachteltes Floating innerhalb des expandierenden Elements zu haben, sind diese "verschachtelten" Floated-Elemente überhaupt nicht wirklich verschachtelt. Wenn Sie versuchen, ein clear: both;unter Ihre "verschachtelten" schwebenden Objekte zu kleben , werden Sie am Ende auch die Floats der obersten Ebene löschen.

Um Boushleys Lösung zu verwenden, möchte ich hinzufügen, dass Sie ein div wie das folgende platzieren sollten: .fakeFloat {height: 100%; Breite: 100%; float: left; } und platziere dies direkt innerhalb des erweiterten div; Der gesamte Inhalt des erweiterten Div sollte sich dann in diesem fakeFloat-Element befinden.

Aus diesem Grund würde ich empfehlen, in diesem speziellen Fall Tabellen zu verwenden. Floated-Elemente sind wirklich nicht für die gewünschte Erweiterung ausgelegt, wohingegen die Lösung mit einer Tabelle trivial ist. Im Allgemeinen wird argumentiert, dass Floating eher für Layouts geeignet ist, nicht für Tabellen. Aber Sie verwenden Floating hier sowieso nicht, Sie fälschen es - und diese Art von Niederlage macht den Zweck des stilistischen Arguments für diesen speziellen Fall zunichte meine bescheidene Meinung.

Ich habe die obigen Lösungen für eine flüssige Linke ausprobiert und eine feste Rechte, aber keine davon hat funktioniert (ich bin mir bewusst, dass die Frage umgekehrt ist, aber ich denke, dass dies relevant ist). Folgendes hat funktioniert:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

Ich hatte ein ähnliches Problem und fand die Lösung hier: https://stackoverflow.com/a/16909141/3934886

Die Lösung ist für ein festes Zentrum div und flüssige Seitensäulen.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Wenn Sie eine feste linke Spalte möchten, ändern Sie einfach die Formel entsprechend.

Sie können die Grid-CSS-Eigenschaften verwenden. Dies ist die klarste, sauberste und intuitivste Art, Ihre Boxen zu strukturieren.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}

<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

Ich frage mich, dass niemand position: absolutemit verwendetposition: relative

Eine andere Lösung wäre also:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle Beispiel

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

Ich habe eine sehr einfache Lösung dafür! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Link: http://jsfiddle.net/MHeqG/

Ich hatte ein ähnliches Problem und fand Folgendes, das gut funktionierte

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Diese Methode wird nicht umbrochen, wenn das Fenster verkleinert wird, sondern erweitert automatisch den Bereich "Inhalt". Die statische Breite für das Site-Menü (links) bleibt erhalten.

Und für die automatische Erweiterung des Inhaltsfelds und der Demo des linken vertikalen Felds (Site-Menü):

https://jsfiddle.net/tidan/332a6qte/

Versuchen Sie, Position relative, Entfernung widthund floatEigenschaften der rechten Seite hinzuzufügen, leftund fügen Sie dann eine rightEigenschaft mit 0Wert hinzu.

Sie können auch eine margin leftRegel hinzufügen, deren Wert auf der Breite des linken Elements basiert (+ einige Pixel, wenn Sie dazwischen Platz benötigen) , um seine Position beizubehalten.

Dieses Beispiel funktioniert für mich:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Versuche dies. Es hat bei mir funktioniert.

Ich arbeite seit zwei Tagen an diesem Problem und habe eine Lösung, die für Sie und alle anderen, die versuchen, eine reaktionsschnelle feste Breite links zu erstellen, funktioniert. Die rechte Seite füllt den Rest des Bildschirms aus, ohne die linke Seite zu umwickeln. Ich gehe davon aus, dass die Seite sowohl in Browsern als auch auf Mobilgeräten reaktionsfähig sein soll.

Hier ist der Code

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Hier ist meine Geige, die vielleicht genauso für dich funktioniert wie für mich. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Regeln für Gegenstände und Behälter;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Verwenden Sie Leerzeichen: nowrap;für Texte in den letzten Punkten für ihre Unstrukturierung.

Artikel X% | Artikel Y% | Artikel Z%

Gesamtlänge immer = 100%!

wenn

Item X=50%
Item Y=10%
Item z=20%

dann

Punkt X = 70%

Element X ist dominant (erste Elemente dominieren im CSS-Layout der Tabelle)!

Versuchen Sie es mit max-content. Eigenschaft für div innen zum Verteilen von div im Container:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}}

Die einfachste Lösung ist die Verwendung von Margin. Dies wird auch reagieren!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

Die einfachste Lösung besteht darin, die Breite des linken Div gleich 100% zu machen - die Breite des rechten Div plus einen beliebigen Abstand zwischen ihnen.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

Ich bin auf dasselbe Problem gestoßen, als ich versucht habe, einige jqueryUI- Steuerelemente zu gestalten. Obwohl die gängige Philosophie jetzt "Verwenden DIVstatt TABLE" ist, fand ich in meinem Fall, dass die Verwendung von TABLE viel besser funktioniert. Insbesondere wenn Sie eine einfache Ausrichtung innerhalb der beiden Elemente benötigen (z. B. vertikale Zentrierung, horizontale Zentrierung usw.), bieten die mit TABLE verfügbaren Optionen hierfür einfache, intuitive Steuerelemente.

Hier ist meine Lösung:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>