Display:Flex Not Working in Chrome

display:flex not working in Chrome

Change your .row to:

.row {
    display: inline-flex;
    width: 100%;
}

You may also want to report this bug to team behind Chrome.

css display flex not working properly on chrome and safari

I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:

#services{
    background-image: url(img/Services-background.jpg);
    overflow: auto;
}
.services-container {
    color: #d6d6d6;
    width: 30%;
    float: left;
    margin: 1%;
}

Then you can add the rest of the styling. It will work on all browsers.

Why is my Flexbox layout not working properly in Safari 15 and in Chrome?

Couple of problems:

1. if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
2. if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
3. if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them

As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.

Code:

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)

Why is flex box not working even in chrome?

<style type="text/css" href="style.css"></style>

This is your problem. When connecting your CSS file, you need to use a link tag instead of a style tag. Try this:

<link rel="stylesheet" href="style.css">

flex-direction is not working as expected in chrome

Well your content is hidden because of this:

.nav{
   background: white;
   padding: 0.2rem;
   height: 0rem;
   min-height:10vh;
   overflow:hidden;
}

You set height for your nav-bar to 0rem. And it shows at least a half of block only because of min-height: 10vh;

And flex-direction doesn't work because you missed a space here

@media only screen and(max-width:750px){

And should be

@media only screen and (max-width:750px){

Display Flex not working on Firefox but Chrome

You can fix this by wrapping your table inside another div like this :

#fluidDescription_subContainer {  display: flex;  display: -moz-box;  display: -webkit-flex;  flex-direction: row;  -webkit-flex-direction: row;  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);  background-color: white;}
#tableWrapper {  flex: 3;}
#fluidDescriptions_table[name="sav"] {  font-size: 12px;  text-align: left;  margin-bottom: 0px;}
#sav_fluid_extra_button {  display: flex;  display: -moz-box;  display: -webkit-flex;  justify-content: center;  align-items: center;  flex-direction: column;  -webkit-flex-direction: column;  flex: 1;  cursor: pointer;  border-left: 2px solid #f4f4f4;  text-decoration: none;}

<div id="fluidDescription_subContainer" style="">  <div id="tableWrapper">    <table name="sav" style="" id="fluidDescriptions_table" class="table">      <tbody id="fluidDescriptions_tbody">        <tr style="border-bottom: 1px solid #f4f4f4">          <td id="fluidDescriptions_controlFunction">Typ 2.3</td>        </tr>        <tr style="border-bottom: 1px solid #f4f4f4">          <td id="fluidDescriptions_steuerung">GAZ-7</td>        </tr>        <tr>          <td>aaa</td>        </tr>        <tr>          <td>bbb</td>        </tr>        <tr>          <td>ccc</td>        </tr>      </tbody>    </table>  </div>    <a href="#" id="sav_fluid_extra_button" data="GAZ-7-SR-2SOV-2QDV-PRV-HPP" style="">    <b>Fluid-Plan</b>    <i class="fa fa-file-pdf-o fa-5x"></i>  </a></div>

section {  width: 1000px;  height: 200px;  white-space: nowrap;  background: yellow;  border: 1px solid green;  overflow-x: auto;  overflow-y: hidden;  z-index: 1;}
a {  display: inline-flex;  min-width: calc(2 * 1cm);  width: 100%;  height: 100%;  overflow: hidden;  border-left: .2rem solid #282323;  border-right: .2rem solid #282323;  box-sizing: border-box;  color: currentcolor;  position: relative;  scroll-snap-align: center none;  text-decoration: none;  transition: box-shadow .5s, transform 1s;  vertical-align: top;}
a:first-child {  background: red;  justify-content: flex-end;}
a:last-child {  background: orange;}
.flex {  display: flex;  flex-direction: column;}section{  font-size:0}section * {  font-size:initial}

<section>  <a>    <p>
    </p>
    <h3 class="flex">      <div>        T      </div>      <div>        i      </div>      <div>        t      </div>      <div>        t      </div>      <div>        l      </div>      <div>        e      </div>    </h3>  </a>  <a>    <p>      don't click! link link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink      link link link link your asss to the bbbbblink link link link link your asss to the bbbbb link link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link      link link your asss to the bbbbblink link link link link your asss to the bbbbb    </p>  </a></section>

.logic_scrollbararea {
    width: 100%;
}

.timeline {
    height: 100%;
    padding-top: 3.125rem;
    position: absolute;
    background: red;
    width: 100%;
}